关于CSSFlex布局的核⼼概念以及常⽤的⼏个属性
主轴和纵轴
对某⼀盒⼦模型添加display: flex；属性后，称之为 Flexible Box 模型（或称之为 flexbox），即弹性盒⼦模型，简称弹性盒⼦。
弹性盒⼦为⼦元素提供了强⼤的空间分布和对齐能⼒。弹性盒⼦拥有两根轴线，分别为主轴和交叉轴（纵轴）。主轴是沿着弹性盒⼦的头到尾的轴线，交叉轴是垂直于主轴的轴线。
容器属性
容器属性是只作⽤于弹性盒⼦的属性，对其⼦元素⽆效。
flex-direction
flex-direction 可以改变弹性盒⼦的⼦元素的排列⽅式。默认⼦元素都以主轴的开始位置进⾏排列。
flex-direction 的值为 column 时，即弹性盒⼦的⼦元素都以交叉轴的开始位置进⾏排列。
flex-wrap
弹性盒⼦的⼦元素超过可承受的最⼤宽度时，⼦元素的宽度将被缩⼩。
flex-wrap 默不换⾏，若希望⼦元素随着弹性盒⼦宽度的变化⽽⾃动换⾏，可以将属性的值设置为 wrap。
flex-flow
flex-flow 是 flex-direction 和 flex-wrap 的简写，接受的值分别对应 flex-direction 、 flex-wrap。
<div class="demo">
<div class="item"></div>
<div class="item"></div>
</div>
<style>
.demo {
width: 150px;
display: flex;
flex-flow: row wrap;
}
.item {
width: 80px;
height: 50px;
background-color: red;
}
</style>
两个⼦元素的总宽度为 160px，⼤于弹性盒⼦的总宽度 150px。由于弹性盒⼦的容器属性 flex-flow 为 wrap，所以，弹性盒⼦的⼦元素换⾏排列。
元素属性
元素属性是只作⽤于弹性盒⼦的⼦元素，对弹性盒⼦⽆效。
flex-grow
flex-grow 指的是让弹性盒⼦的某⼀个⼦元素可以分配到剩余空间的系数。
flex布局对齐方式<div class="demo">
<div class="item-1 item"></div>
<div class="item-2 item"></div>
</div>
<style>
.demo {
height: 50px;
display: flex;
}
.item-1 {
flex-grow: 1;
background-color: red;
}
.item-2 {
flex-grow: 2;
background-color: rgb(4, 123, 221);
}
</style>
div.item-2 的属性 flex-grow 的值为 2，如图所⽰，红⾊部分分配的空间会⽐蓝⾊分配得多⼀些。
flex-basis
flex-basis 指的是让弹性盒⼦的某⼀个⼦元素沿着主轴⽅向的固定宽度。默认根据⼦元素的内容来分配固定宽度。
<div class="demo">
<div class="item-1 item">Hello World！</div>
<div class="item-2 item">Hello CSS！</div>
</div>
<style>
.demo {
display: flex;
}
.item-1 {
flex-basis: 200px;
background-color: red;
}
/* 设置flex-basis为200px */
.item-2 {
background-color: rgb(4, 123, 221);
}
</style>
div.item-1 的 flex-basis 指定为 200px，不同于 div.item-2 由内容来分配宽度。
flex-shrink
当弹性盒⼦在进⾏伸缩操作时，其所有⼦元素会根据浏览器的⼤⼩，等⽐例地缩⼩宽度。其中⼀个⼦元素拥有 flex-shrink 属性时，在伸缩过程中，值越⼤，被忽略的优先度越⾼。
<div class="demo">
<div class="item-1 item"></div>
<div class="item-2 item"></div>
<div class="item-3 item"></div>
</div>
<style>
.demo {
height: 50px;
display: flex;
}
.item-1 {
flex-shrink: 1;
width: 50px;
background-color: red;
}
.item-2 {
flex-shrink: 2;
width: 100px;
background-color: rgb(4, 123, 221);
}
.item-3 {
flex-shrink: 3;
width: 150px;
background-color: rgb(22, 236, 226);
}
</style>
item-1 的 flex-shirnk 值为1，item-2 和 item-3 依此为基础递增。在发⽣伸缩时，弹性盒⼦的⼦元素伸缩的规则结果为，flex-shrink 的值越⼤，也就是权重越⾼，元素就越先被忽略。
flex
flex 是 flex-grow、flex-shrink、flex-basis的简写。flex 只有⼀个值时，相当于 flex-grow，有两个值时，相当于 flex-shrink，以此类推。
作⽤于交叉轴
以下属性可以改变弹性盒⼦的⼦元素在交叉轴上的排列位置。
align-self
弹性盒⼦的⼦元素⾼度不⼀致时，默认所有⼦元素都排在弹性盒⼦的最顶端，即交叉轴的开始位置。
align-self 属性只作⽤于⼦元素，它可以改变⼦元素在弹性盒⼦交叉轴的上、中、下的排列位置。可以接受 stretch、center、start、end 四个值。
<div class="demo">
<div class="item-1 item"></div>
<div class="item-2 item"></div>
</div>
<style>
.demo {
height: 50px;
display: flex;
}
/* align-self为center */
.item-1 {
align-self: center;
width: 50px;
height: 30px;
background-color: red;
}
.item-2 {
width: 100px;
background-color: rgb(4, 123, 221);
}
</style>
在不设置 align-self 为 center 时，默认 div.item-1 元素沿着弹性盒⼦交叉轴轴最顶端排列。
设置 align-self 为 center 之后，div.item-1 元素沿着弹性盒⼦交叉轴中⼼位置排列。
align-items
align-items 的作⽤于 align-self 相同，区别是，align-items 只作⽤于弹性盒⼦，⽽不作⽤于⼦元素。
<div class="demo">
<div class="item-1 item"></div>
<div class="item-2 item"></div>
</div>
<style>
/* align-items设置在弹性盒⼦上 */
.
demo {
height: 50px;
display: flex;
align-items: center;
}
.item-1 {
width: 50px;
height: 30px;
background-color: red;
}
.item-2 {
width: 100px;
height: 40px;
background-color: rgb(4, 123, 221);
}
</style>
若⼦元素没有⾼度（或⾼度为 0），设置 align-items（或 align-self 设置在⼦元素上）在弹性盒⼦上，⼦元素将会消失。
align-content
当弹性盒⼦的⾼度还有剩余空间，且容器可以换⾏。默认所有的⼦元素都以交叉轴排列，下⼀排有⼀些空隙。
align-centent 可以改变弹性盒⼦内⼦元素如何分配交叉轴剩余的空间。可以接受 stretch、center、flex-end、flex-start、space-between、space-around 等。如，将 align-content 设置为 flex-start，所有的⼦元素都紧凑在纵轴的开始位置。
作⽤于主轴
除了上边的⼏个让弹性盒⼦的⼦元素在交叉轴对齐⽅式的属性以外，还可以让⼦元素在主轴的对其⽅式的属性。
justify-content
justify-content ⽤来使⼦元素在主轴⽅向上对齐，初始值为 flex-start，即所有的⼦元素从弹性盒⼦的起始位置开始排列。
通过改变 justify-content 的属性来改变对其⽅式，接受 stretch、flex-start、flex-end、center、space-around、space-between 六种值。
center 使弹性盒⼦的⼦元素集中向主轴的中⼼排列。
space-between 使弹性盒⼦的两端⼦元素在主轴⽅向上向两端散开，其余⼦元素平均分配剩余空间。
space-around 使弹性盒的⼦元素平均地分布在主轴上，两端保留⼦元素与⼦元素之间间距⼤⼩的⼀半。

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