flex布局

2018-07-24 本文已影响0人前端葱叶

By Leaf

在前端的学习过程中，布局可以说是非常重要的，之前一直用DIV和CSS布局，但是深受定位、浮动等属性的困扰。后来学习了flex布局才发现，只要熟悉flex布局，大部分复杂的网页都可以用flex布局实现。这里主要是将之前学习的flex知识加以复习和巩固，便于自己以后忘记查阅。

一、简单理解flex布局

首先我们来理解一下flex布局的一些基本概念(图是我从网上找来的，我觉得对理解flex布局很有用)：

image.png
任何一个容器都可以指定为flex布局

在flex容器中有两条轴线：水平轴线（main axis）和垂直轴线(cross axis)。我们可以通过设置决定我们布局的主轴方向，一般默认主轴为水平轴线。
flex容器中每一个项目单元都称为flex item,每一个flex item所占的主轴空间为main size。cross size则为flex item的垂直空间（或称交叉轴空间）。

任何一个容器都可以指定为flex布局，任何容器耶必须先指定flex布局display:flex才能使用flex布局的所有属性。
flex的属性有：

flex-direction: row | row-reverse | column | column-reverse; 确定主轴方向
flex-wrap:nowrap | wrap | wrap-reverse;允许项目是否换行
justify-content:flex-start | flex-end | center |space-between | space-around;确定项目在主轴的对齐方式
align-items:flex-start | flex-end | center | baseline | stretch;确定项目在交叉轴方向的对齐方式
align-content:flex-start | flex-end | center | space-between | space-around | stretch;确定多根轴线的对齐方式，如果项目只有一根轴线，则该属性不起作用。

接下来对每一个属性和属性值展开demo：

<!--demo，html代码-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex布局</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .container div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        .container{
            display: flex;
            flex-direction: row;
        }
    </style>
</head>

<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

</html>

flex-direction 确定主轴方向

flex-direction: row | row-reverse | column | column-reverse

flex-direction:row;确定主轴方向为水平方向,起点在左端。

  .container{
            display: flex;
            flex-direction: row;
        }

image.png

flex-direction:row-reverse;确定主轴方向为水平方向,起点在右端。

  .container{
            display: flex;
            flex-direction: row-reverse;
        }

image.png

flex-direction:column;确定主轴方向为垂直方向,起点在上端。

 .container{
            display: flex;
            flex-direction: column;
        }

image.png

flex-direction:column-reverse;确定主轴方向为垂直方向,起点在下端。

 .container{
            display: flex;
            flex-direction: column-reverse;
        }

image.png

flex-wrap 允许项目是否换行

flex-wrap:nowrap | wrap | wrap-reverse;

flex-wrap:nowrap;当容器的主轴固定，而空间不足的时候，项目flex-item会随着调整，不会换到下一行。

  .container{
            width: 300px;
            border: 1px solid black;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
        }

image.png

flex-wrap:wrap;当容器的主轴固定，而空间不足的时候，项目flex-item会随着调整，换到下一行。

  .container{
            width: 300px;
            border: 1px solid black;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

image.png

justify-content确定项目在主轴方向的对齐方式

justify-content：flex-start | flex-end | center | space-between | space-around

jusity-content:flex-start;确定项目在主轴方向的对齐方式:左对齐（这里主轴设置主轴是水平方向：flex-direction:row;）

 .container{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
        }

image.png

jusity-content:flex-end;确定项目在主轴方向的对齐方式:右对齐（这里主轴设置主轴是水平方向：flex-direction:row;）

 .container{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

image.png

jusity-content:flex-center;确定项目在主轴方向的对齐方式:居中对齐（这里主轴设置主轴是水平方向：flex-direction:row;）

 .container{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
        }

image.png

jusity-content:fspace-between;确定项目在主轴方向的对齐方式:两端对齐，项目之间的间隔相等，即剩余空间等分成间隙（这里主轴设置主轴是水平方向：flex-direction:row;）

 .container{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
        }

image.png

jusity-content:space-around;确定项目在主轴方向的对齐方式:每个项目两侧的间隔相等（这里主轴设置主轴是水平方向：flex-direction:row;）

 .container{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
        }

image.png

jusity-content:space-evenly;确定项目在主轴方向的对齐方式:：项目均匀分布，所有项目之间及项目与边框之间距离相等（这里主轴设置主轴是水平方向：flex-direction:row;）

 .container{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }

image.png

综上所诉,
justify-content确定项目在主轴方向的对齐方式的大图如下（图是我在学习的过程中在网上看到的，这个图一目了然，很容易理解）：

image.png

align-items确定项目在交叉轴方向的对齐方式。

align-items:flex-start | flex-end | center | baseline | stretch;

为了效果明显，我们要修改div的样式，给每一个div设置分别高度20px、40px、60px、80px。

 .container div {
            width: 100px;
        }

        .container div:nth-of-type(1) {
            height: 20px;
            border: 1px solid red;
        }
        .container div:nth-of-type(2) {
            height: 40px;
            border: 1px solid blue;
        }
        .container div:nth-of-type(3) {
            height: 60px;
            border: 1px solid rgb(255, 0, 157);
        }
        .container div:nth-of-type(4) {
            height: 80px;
            border: 1px solid green;
        }

align-item:flex-start;确定项目在交叉轴方向的对齐方式

        .container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-start;
        }

image.png

align-item:flex-end;确定项目在交叉轴方向的对齐方式

        .container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-end;
        }

image.png

align-item:center;确定项目在交叉轴方向的对齐方式:以交叉轴的中点对齐

 .container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            height: 300px;
            border: 1px solid black;
            align-items: center;
        }

image.png

align-item:baseline;确定项目在交叉轴方向的对齐方式:以第一行文字为基线对齐

 .container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            height: 300px;
            border: 1px solid black;
            align-items: baseline;
        }

image.png

align-item: stretch;如果项目flex-item没有设置高度,而容器设置了高度，则项目会默认充满整个容器。
假设容器高度设置为 300px，而项目都没有设置高度的情况下，则项目的高度也为 300px。

   .container div {
            width: 100px;
        }

        .container div:nth-of-type(1) {
            /* height: 20px; */
            border: 1px solid red;
        }

        .container div:nth-of-type(2) {
            /* height: 40px; */
            border: 1px solid blue;
        }

        .container div:nth-of-type(3) {
            /* height: 60px; */
            border: 1px solid rgb(255, 0, 157);
        }

        .container div:nth-of-type(4) {
            /* height: 80px; */
            border: 1px solid green;
        }

        .container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            height: 300px;
            border: 1px solid black;
            align-items: stretch;
        }

image.png

综上所述：

image.png

align-content确定了在交叉轴方向的对齐方式及额外空间分配，类似于主轴上justify-content的作用。

align-content: stretch | flex-start | flex-end | center | space-between | space-around ;

image.png

在这里献上几位大神对flex布局的讲解，因为有了他们的深入讲解，我才理解了flex布局，这里根据学到知识自己整合了一下，便于自己以后忘记查阅，若有错别之处，望大神之处，比心，感谢。
30分钟学会flex布局
 flex-弹性布局原来如此简单
 flex小技巧
 flex快速上手小记
（图好像没放好，等我有空再整理）

flex布局

一、简单理解flex布局

猜你喜欢

热点阅读