flex兼容性_⼀次读懂flex布局
”
“ 千⾥之⾏，始于⾜下。——⽼⼦”
01 前⾔
前端的页⾯布局，在之前那是颇为头疼，⼀个简单的⽔平垂直居中可能要写上不少代码，但是现在利⽤⼀种新的布局⽅式，三⾏代码就可以实现。可以说，flex布局是未来布局的⾸选⽅案，且兼容性对各⼤浏览器都良好。
02 主轴属性
当容器设置为flex布局之后，可以对⾥⾯的各个元素采⽤不同的排列⽅式。对于采⽤flex布局的容器，可以使⽤以下属性。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
⼀个容器默认会存在主轴（main axis）和交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）
叫做main start，结束位置叫做mainend；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
基本节点结构
<div class="container">
<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
<div class="item4">D</div>
<div class="item5">E</div>
</div>
</div>
1. flex-direction
.box{
flex-direction: row | row-reverse | column | column-reverse;
}
row
row-reverse
column / column-reverse
2. flex-wrap
默认情况下，容器内部的item都排在主轴上。该属性定义如果轴线排不下的时候该如何换⾏。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
默认情况下是不换⾏，nowrap。下⾯展⽰换⾏wrap和反向换⾏的情况。
wrap
wrap-reverse
3. flex-flow
该属性是flex-direction和flex-wrap的简写⽅式（⼀般不⽤关注）
//默认 flex-flow: row nowrap
.box {
flex-flow: flex-direction flex-wrap;
}
4. justify-content
该属性定义了item是如何在主轴上排列
.box {
justify-content: flex-start | flex-end | center | space-between | space-around; }
默认情况下是flex-start
flex-start
flex-end
space-around
flex布局对齐方式space-between
center
5. align-items
.box {
align-items: flex-start | flex-end | center | baseline | stretch; }
flex-start / stretch / baseline
center
flex-end
6. align-content
由于⾃⼰写出来的效果不直观，所以就使⽤官⽹的例⼦来进⾏演⽰。注意此属性对于单⾏的弹性盒⼦模型⽆效，即 flex-wrap : nowrap 03 交叉轴属性
交叉轴上⾯可以运⽤的属性有以下6种：
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1. order
order属性定义项⽬的排列顺序。数值越⼩，排列越靠前，默认为0。
.item {
order: <integer>;
}
给H添加 order : -1
2. flex-grow
该属性是指当⼦元素总宽度和⽐盒⼦宽度⼩的时候，⼦元素该如何⽠分⽗元素剩余宽度。下⾯是分别给ABCD四个元素的flex-grow设置为1，2，3，3
.item {
flex-grow: <number>; /* default 0 */
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。