关于flex布局的详解

关于flex布局的详解

flex布局(Flexible Box)是对界面css盒模型的一个优化，适应不同尺寸的屏幕，被定义flex的容器可以控制子元素的排列方向和大小，能够用更简单清晰的代码来完成复杂的布局。

---

布局概念图

包含元素(flex container)设置display:flex或inline-flex来定义弹性容器，子元素为弹性项目（flex-item）。每个弹性容器包含两根轴（Axis），弹性项目默认从左到右排列的那个轴为主轴(main axis)，垂直主轴的那根轴为交叉轴（cross axis）。

弹性盒子使用了不同的布局算法，某些属性用在弹性容器上没有意义：

多栏布局模块的column-*属性对弹性项目无效。
float与clear对弹性项目无效。使用float将使元素的display属性计为block。
vertical-align对弹性项目的对齐无效。

语法

flex-direction: row（默认） | row-reverse | column | column-reverse ;

row是主轴在水平方向，从左到右排列

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

row-reverse是主轴在水平方向，从右到左排列

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

column是主轴在垂直方向，从上到下排列

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

column-reverse是主轴在垂直方向，从下到上排列

扫描二维码关注公众号，回复： 5354709 查看本文章

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

flex-wrap: nowrap(默认) | wrap | wrap-reverse ;

nowrap 是flex-wrap的 默认值，弹性容器为单行

.father1{
            width:500px;
            height:400px;
            background: lightcoral;
            margin:20px auto;
            display: -webkit-flex;
            display:flex;
            -webkit-flex-wrap:nowrap;
            flex-wrap:nowrap;
        }
   .son1{
            width:200px;
            height:100px;
            border:2px solid crimson;
            background: coral;
            margin:10px;
            text-align: center;
            color: #fff;
        }

<div class="father1">
    <div class="son1">nowrap1</div>
    <div class="son1">nowrap2</div>
    <div class="son1">nowrap3</div>
</div>

flex-wrap：wrap 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。

.father2{
            width:500px;
            height:400px;
            background: lightcoral;
            margin:20px auto;
            display: -webkit-flex;
            display:flex;
            -webkit-flex-wrap:wrap;
            flex-wrap:wrap;
        }
  .son2{
            width:200px;
            height:100px;
            border:2px solid crimson;
            background: coral;
            margin:10px;
            text-align: center;
            color: #fff;
        }

<div class="father2">
    <div class="son2">nowrap1</div>
    <div class="son2">nowrap2</div>
    <div class="son2">nowrap3</div>
</div>

flex-wrap：wrap-reverse ；与 wrap相反的排列方式。

.father3{
            width:500px;
            height:400px;
            background: lightcoral;
            margin:20px auto;
            display: -webkit-flex;
            display:flex;
            -webkit-flex-wrap:wrap-reverse;
            flex-wrap:wrap;
        }
  .son3{
            width:200px;
            height:100px;
            border:2px solid crimson;
            background: coral;
            margin:10px;
            text-align: center;
            color: #fff;
        }

<div class="father3">
    <div class="son3">nowrap1</div>
    <div class="son3">nowrap2</div>
    <div class="son3">nowrap3</div>
</div>

justify-content: flex-start(默认) | flex-end | center | space-between | space-around ;

flex-start: 弹性盒子元素将向行起始位置对齐。第一个元素与左起始边界对齐，后面的元素接着第一个元素进行排列

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

flex-end: 弹性盒子元素将向行结束位置对齐。整体靠着行结束的位置排列

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

center：整体居中显示

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

space-between: 弹性盒子元素均匀分布。第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等

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

space-around: 弹性盒子元素均匀分布。两端保留子元素与子元素之间间距大小的一半

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

align-items: flex-start(默认) | flex-end | center | baseline | stretch ;

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

stretch是align-items属性的默认值，它表示项目在交叉轴（cross axis）上，撑满整个容器。（前提未设置高度或auto）

.container{
    display:flex;
    align-items:stretch
}

align-items：flex-start；弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

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

align-items：flex-end；弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

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

align-items：center；弹性盒子元素在该行的侧轴（纵轴）上居中放置。如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度。

.container{
    display:flex;
    align-items:center
}

align-items：baseline；如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

.container{
    display:flex;
    align-items:baseline
}

align-content: flex-start | flex-end | center | space-between | space-around | stretch ;
会设置自由盒内部各个项目在垂直方向排列方式。必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。这个属性是对她容器内部的项目起作用，对父元素进行设置。

stretch:默认设置，会拉伸容器内每个项目占用的空间，填充方式为给每个项目下方增加空白。第一个项目默认从容器顶端开始排列。

Center：这个会取消项目之间的空白并把所有项目垂直居中。

Flex-start:这个会取消项目之间的空白，并把项目放在容器顶部。

flex-end:这个会取消项目之间的空白并把项目放在容器底部。

space-between这个会使项目在垂直方向两端对齐。即上面的项目对齐容器顶部，最下面一个项目对齐容器底部。留相同间隔在每个项目之间。

Space-around:这个会使每个项目上下位置保留相同长度空白，使得项目之间的空白为两倍的单个项目空白。

order 定义项目的排列顺序，按属性值大小，从小到大排列。

.container{
    display:flex
}
.item1{
    order:1
}
.item2{
    order:3
}
.item3{
    order:2
}

flex-grow 定义项目等放大比例，默认是0（不放大）。

.container{
    display:flex
}
.item1{
    flex-grow:1
}
.item2{
    flex-grow:2
}
.item3{
    flex-grow:1
}
*存在在剩余空间的条件下，item2的占有剩余空间的大小是item3和item1的两倍。
注：下面的空间是设置了padding 和 margin 值，非剩余空间。

.flex-shrink 定义项目等缩小比例，默认是1（如果空间不够，将缩小）。

.container{
    display:flex
}
.item1{
    flex-shrink:1
}
.item2{
    flex-shrink:0
}
.item3{
    flex-shrink:1
}
*空间不足的条件下，item3和item1将等比缩小，item2不缩小。
注：下面的空间是设置了padding 和 margin 值，非剩余空间。

flex-basis 指定了项目在主轴方向上的初始大小,默认值是auto。

.container{
    display:flex
}
.item1{
    flex-basis:50px
}
.item2{
    flex-basis:150px
}
.item3{
    flex-basis:300px
}
*item1的在主轴上的初始的大小是50px,item2是150px,item3是300px。

flex: none | [<’flex-grow’> <’flex-shrink’>? || <’flex-basis’>] ； 默认值是 0 1 auto ，快捷属性 flex:auto (1 1 auto) 、 flex:none (0 0 auto)

.container{
    display:flex
}
.item{
    flex:auto
}

align-self: auto(默认) | flex-start | flex-end | center | baseline | stretch ;

.container{
    display:flex
}
.item3{
    align-self:auto
}
*设置auto 继承父元素的align-items属性，如果父元素没有设置，则相当于项目设置成了stretch。

.container{
    display:flex
}
.item3{
    align-self:flex-start
}
*项目在交叉轴(cross axis)上起点对齐。

.container{
    display:flex
}
.item3{
    align-self:flex-end
}
*项目在交叉轴(cross axis)上终点对齐。

.container{
    display:flex
}
.item3{
    align-self:center
}
*项目在交叉轴(cross axis)上居中。

.container{
    display:flex
}
.item3{
    align-self:baseline
}
*项目的第一行文字的基线对齐。

.container{
    display:flex
}
.item3{
    align-self:stretch
}
*项目在交叉轴(cross axis)充满。