css常⽤布局-flex⾃适应布局
⽬录
⼀、 Flex布局简介
flex布局基于盒状模型，原意为弹性布局，⽤来为盒状模型提供最⼤的灵活性。为CSS中display的⼀个属性；常⽤于我们常见的分布布局，⽐如说多个块并列，⾃适应屏幕宽度等；在移动端应⽤⼴泛。⽬前所有的浏览器都⽀持flex布局。
⼆、属性介绍
使⽤flex的属性能实现⼤多数盒装平⾯布局场景，满⾜⼤多数的业务需求；功能强⼤之处在于多种属性的结合。⾸先得了解基本属性，本篇将基本属性以及相关代码贴出，作为flex⼊门篇。
1. 轴的概念
声明flex布局的容器，其所有的⼦元素都成为该容器的成员，由于是盒⼦模型，我们将这些⼦元素称为⼦盒⼦。在容器的内部存在两根轴线，x、y轴，x轴为⽔平轴线，y轴为与x轴交叉的交叉轴线。flex的多个属性就是规定⼦盒⼦在⽔平与交叉轴上进⾏排列。
2. 容器的属性
使⽤最多的是作⽤于容器的属性，基本的有如下六个：
flex-direction  //定义了⼦盒⼦排列⽅向
flex-wrap    //定义是否换⾏
flex-flow    //前两个属性组合
justify-content  //定义⼦盒⼦在主轴对齐⽅式
align-items    //定义⼦盒⼦在交叉轴上对齐⽅式
align-content  //定义多⾏时对齐⽅式
2.1 flex-direction属性
定义了⼦盒⼦排列⽅向，有如下基本值：
row（默认值）：主轴为⽔平⽅向，起点在左端。
row-reverse：主轴为⽔平⽅向，起点在右端。
column：主轴为垂直⽅向，起点在上沿。
column-reverse：主轴为垂直⽅向，起点在下沿。
flex-direction默认为⽔平⽅向：flex-direction：row；如下图所⽰：
代码如下：
//html代码
<div class="flex-display">
<div class="flex-box">1</div>
<div class="flex-box">2</div>
<div class="flex-box">3</div>
</div>
//css代码
.flex-display {
display: flex;
}
.flex-box {
margin: 10px 20px;
flex: 1;
height: 50px;
width: 35px;
background-color: red;
font-size: 15px;
color: #ffffff;
text-align: center;
}
width属性此时不会⽣效，⼦盒⼦间margin属性会⽣效。⼦盒⼦宽度由屏幕宽度减去margin宽度后，再进⾏⾃适应。某些特殊情景需要⼦盒⼦从右到左排序，此时可⽤flex-direction: row-reverse；如下图所⽰：
上图排列的代码如下：
//html代码
<div class="flex-row-reverse">
<div class="flex-box">1</div>
<div class="flex-box">2</div>
<div class="flex-box">3</div>
</div>
css布局左边固定右边自适应//css代码
.flex-row-reverse{
display:flex;
flex-direction: row-reverse;
}
当需要纵向排列时，容器上定义flex-direction: column；此时若没有定义容器⾼度，则⾃⼰定义的⾼度属性就会⽣效，否则会⾃适应容器⾼度：
如下未定义容器⾼度（左）；定义容器⾼度（300px）（右）：
代码如下：
//html代码
<div class="flex-column">
<div class="flex-box">1</div>
<div class="flex-box">2</div>
<div class="flex-box">3</div>
</div>
//css代码
.flex-column{
display:flex;
flex-direction: column;
height: 300px;//左边未设该⾼度属性
}
colomn默认从上到下排列，若设置flex-direction: column-reverse；则⼦元素为从下到上排列，如图：
2.2 flex-wrap属性
flex-wrap属性定义主轴上⼦元素的换⾏⽅式。flex-wrap有如下⼏个值：
nowrap： 默认值，⼦盒⼦在⼀⾏上
wrap ：换⾏，第⼀⾏在上⽅
wrap-reverse：换⾏，第⼀⾏在下⽅
默认不换⾏nowrap；此时⼦元素的宽度属性将由屏幕宽度进⾏⾃适应；如下图所⽰
若值为flex-wrap:wrap ，则⼦盒⼦设置的宽度属性就会⽣效，此时第⼀⾏在上⽅，排不下时⾃动换⾏，如下图所⽰：
上图对应的代码如下：
//html代码
<div class="flex-wrap">
<div class="flex-box-width-diff">1</div>
<div class="flex-box-width-diff">2</div>
<div class="flex-box-width-diff">3</div>
<div class="flex-box-width-diff">4</div>
<div class="flex-box-width-diff">5</div>
</div>
//css代码
.flex-wrap{
display:flex;
flex-wrap: wrap;
}
.flex-box-width-diff{
margin: 10px 20px;
height: 50px;
width: 300px;
background-color: red;
font-size: 15px;
color: #ffffff;
text-align: center;
}
同样的，换⾏情况下也可以让第⼀⾏从下⽅开始，设置flex-wrap: wrap-reverse；即可，如下图：
2.3 flex-flow属性
flex-flow是flex-direction和flex-wrap属性的组合，取两个值flex-flow:，默认为 row nowrap。上⾯两个属性已经包含了其默认值情况，我们看⼀下⾮默认值时其布局呈现的⽅式，如下图，我们设置flex-flow: column wrap；效果如下：
代码如下：
//html代码
<div class="flex-flow">
<div class="flex-box-width-diff">1</div>
<div class="flex-box-width-diff">2</div>
<div class="flex-box-width-diff">3</div>
<div class="flex-box-width-diff">4</div>
<div class="flex-box-width-diff">5</div>
</div>
//css代码
.flex-flow {
display: flex;
flex-flow: column wrap;
height: 200px;
}
该属性由于综合了两个值，对容器的空间分配稍微复杂⼀些，可以满⾜特定场景的布局。
2.4 justify-content属性
该属性属于flex布局中最常⽤的属性，通过设置该属性的值，可实现多种场景的布局；justify-content属性定义了项⽬在轴线上的对齐⽅式，有如下⼏个值：
flex-start：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，每个盒⼦间距相等，盒⼦间的间距属性失效
space-around：每个盒⼦与其他盒⼦左右边距相等
默认取值flex-start；我们看下⾮默认取值情况下该属性所呈现的效果；
1、flex-end，在主轴线为⽔平轴情况下，布局效果如下所⽰：
代码如下：
//html代码
<div class="flex-end">
<div class="flex-box2">1</div>
<div class="flex-box-width-diff">2</div>
<div class="flex-box2">3</div>
</div>
//css代码
.flex-end {
display: flex;
justify-content: flex-end;
}

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