cssdisplay：flex属性
⼀：display:flex 布局
display:flex 是⼀种布局⽅式。它即可以应⽤于容器中，也可以应⽤于⾏内元素。是W3C提出的⼀种新的⽅案，可以简便、完整、响应式地实现各种页⾯布局。⽬前，它已经得到了所有浏览器的⽀持。
Flex是Flexible Box的缩写，意为"弹性布局"，⽤来为盒状模型提供最⼤的灵活性。设为Flex布局以后，⼦元素的float、clear和vertical-align属性将失效。
⼆：flex的六个属性
flex-direction 容器内元素的排列⽅向(默认横向排列)
1：flex-direction:row; 沿⽔平主轴让元素从左向右排列
1536039075.png
2：flex-direction:column; 让元素沿垂直主轴从上到下垂直排列
1536039314(1).png
3：flex-direction:row-reverse；沿⽔平主轴让元素从右向左排列
1536039460(1).png
flex-wrap 容器内元素的换⾏(默认不换⾏)
1：flex-wrap: nowrap; (默认)元素不换⾏,⽐如：⼀个div宽度100%，设置此属性，2个div宽度就⾃动变成各50%；
2：flex-wrap: wrap; 元素换⾏,⽐如：⼀个div宽度100%，设置此属性，第⼆个div就在第⼆⾏了；
justify-content 元素在主轴（页⾯）上的排列
1：justify-content : center；元素在主轴（页⾯）上居中排列
1536041764(1).png
2：justify-content : flex-start；元素在主轴（页⾯）上由左或者上开始排列
1536041631(1).png
3：justify-content : flex-end；元素在主轴（页⾯）上由右或者下开始排列
1536042053(1).png
4：justify-content : space-between；元素在主轴（页⾯）上左右两端或者上下两端开始排列
1536042390(1).pngflex布局对齐方式
5：justify-content : space-around；每个元素两侧的间隔相等。所以，元素之间的间隔⽐元素与边框的间隔⼤⼀倍。
1536042636(1).png
align-items 元素在主轴（页⾯）当前⾏的横轴（纵轴）⽅向上的对齐⽅式
1：align-items : flex-start; 弹性盒⼦元素的侧轴（纵轴）起始位置的边界紧靠住该⾏的侧轴起始边界（靠上对齐）。
1536043107(1).png
2：align-items : flex-end; 弹性盒⼦元素的侧轴（纵轴）起始位置的边界紧靠住该⾏的侧轴结束边界。（靠下对齐）
1536043238(1).png
3：align-items : center; 弹性盒⼦元素在该⾏的侧轴（纵轴）上居中放置。（居中对齐）
1536043373(1).png
4：align-items : baseline; 如弹性盒⼦元素的⾏内轴与侧轴为同⼀条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
（靠上对齐）
align-content 在弹性容器内的元素没有占⽤交叉轴上所有可⽤的空间时对齐容器内的各项（垂直）
<div id="main">
<div ></div>
<div ></div>
<div ></div>
</div>
#main {
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: flex-start;
}
#main div {
width: 70px;
height: 70px;
}
1：align-content: flex-start; 元素位于容器的开头。各⾏向弹性盒容器的起始位置堆叠。
1536046493(1).png
2:align-content: flex-end; 元素位于容器的结尾。各⾏向弹性盒容器的结尾位置堆叠。
1536046542(1).png
3:align-content: stretch; 元素位于容器的中⼼。各⾏向弹性盒容器的中间位置堆叠。
1536046654(1).png
4:align-content: center; 默认值。元素被拉伸以适应容器。各⾏将会伸展以占⽤剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。
1536046771(1).png
5:align-content: space-between；元素位于各⾏之间留有空⽩的容器内。各⾏在弹性盒容器中平均分布。
1536046899(1).png
6:align-content: space-around；元素位于各⾏之前、之间、之后都留有空⽩的容器内。各⾏在弹性盒容器中平均分布，两端保留⼦元素与⼦元素之间间距⼤⼩的⼀半。如果剩余的空间是负数或弹性盒容器中只有⼀⾏，该值等效于'center'。
1536047051(1).png
三：flex常见属性总结
Positional alignment
justify-content: center; ：居中排列
justify-content: flex-start; /* 从⾏⾸起始位置开始排列/
justify-content: flex-end; /从⾏尾位置开始排列 */

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