admin管理员组文章数量:1531438
Flex是什么？
Flex是一种弹性盒子，属于CSS3的一种新的布局模式。它相较于我们之前介绍的布局方法更高级、更有效、更好用。现在主流的浏览器对Flex都有较好的支持，可以放心用。
弹性盒子是由弹性容器和弹性子元素组成，弹性容器就是父元素，弹性子元素就是父元素里面的子元素。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。写个小例子：
<div style="display:flex;">
<p></p>
<p></p>
</div>
标签div通过设定display:flex被定义为了一个弹性容器。里面有两个弹性子元素，标签<p>。
弹性子元素默认是以内联元素的形式从左到右排列成一行。我们可以通过给弹性容器修改属性来改变里面子元素的布局模式。
flex设定布局的方法和之前的方法不一样。它是给父元素设定属性，来确定子元素的布局模式。之前讲的布局，是通过设定元素自身来确定自己的布局模式。
除了上面的display属性需要设置成flex以外，弹性容器上还有6个CSS属性。它们是：
flex-direction：设置弹性容器中子元素的排列方式
flex-wrap：设置弹性盒子的子元素超出父容器时是否换行
flex-flow：flex-direction 和 flex-wrap 的简写
justify-content：设置弹性盒子的子元素在水平方向上的对齐方式
align-items：设置弹性盒子的子元素在垂直方向上的对齐方式
align-content：设置弹性盒子的子元素多行对齐方式，如果只有一行，该属性不起作用
弹性子元素上也有6个属性。它们是：
order：子元素排列顺序
flex-grow：子元素的放大比例
flex-shrink：子元素的缩小比例
flex-basis：在分配多余空间之前，子元素占据的主轴空间
flex：子元素如何分配空间
align-self：覆盖容器的 align-items 属性
- 弹性容器上的属性
flex-direction：设置弹性容器中子元素的排列方式。
它的属性值有四个：
row：默认值，从左到右，水平排列
row-reverse：从右到左，水平排列
column：从上到下，垂直排列
column-reverse：从下到上，垂直排列
flex-wrap：设置弹性盒子的子元素超出父容器时是否换行。
它的属性值有三个：
nowrap：默认值，不换行
wrap：换行，第一行在最上方
wrap-reverse：换行，第一行在最下方
flex-flow是flex-direction和flex-wrap的简写。第一个值表示flex-direction，第二个值表示flex-wrap。默认值是row nowrap。写法如下：
flex-flow:row nowrap; //水平排列不换行
justify-content：设置弹性盒子的子元素在水平方向上的对齐方式。
它的属性值有五个：
flex-start：默认值，左对齐
flex-end：右对齐
center：居中对齐
space-between：两端对齐，子元素之间的间隔相等
space-around：每个子元素两侧的间隔相等，导致最左边和最右边的子元素与父元素的间隔是每个子元素间隔的一半。
效果图如下：
align-items：设置弹性盒子的子元素在垂直方向上的对齐方式
它的属性值有五个：
flex-start：上端对齐
flex-end：下端对齐
center：垂直居中对齐
baseline：子元素的第一行文字的基线对齐
stretch：默认值，如果子元素未设置高度或设为auto，将占满整个容器的高度
效果图如下:
align-content：设置弹性盒子的子元素多行对齐方式
它的属性值有六个：
flex-start：每行向弹性盒容器的起始位置堆叠
flex-end：每行向弹性盒容器的结束位置堆叠
center：每行向弹性盒容器的中间位置堆叠
space-between：每行在弹性盒容器中平均分布
space-around：每行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半
stretch：默认值，各行将会伸展以占用剩余的空间
效果图如下:
- 弹性子元素上的属性
order：定义子元素的排列顺序。属性值是整数，可以为负值，数值越小，排列越靠前，默认是0。
flex-grow：子元素的扩展比率。属性值是正整数，默认是0
flex-shrink：子元素的收缩比率。属性值是正整数，默认是1
flex-basis：子元素默认基准值。可以是固定的像素值，也可以是百分比，默认是auto。
flex：子元素如何分配空间。是flex-grow、flex-shrink、flex-basis的简写，后面两个属性是可选的，不经常用。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self：覆盖容器的 align-items 属性，默认值是auto。其他的值和align-items的值一样。
由于浏览器的兼容性问题，建议大家在写属性的时候，都加上前缀，主要的前缀有：
-webkit-（谷歌、safari）
-ms-（IE）
-moz-（火狐）
flex布局还是非常好用的，学会了它，之前的布局也许你都不愿意用了。
最后，用flex写一个示例，flex设置垂直水平居中。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.flex-container {
display: flex;
display: -webkit-flex;
display: -ms-flex;
display: -moz-flex;
width: 300px;
height: 100px;
background-color: black;
}
.flex-item {
background-color: red;
margin:auto;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">刘小妞的栖息地</div>
</div>
</body>
</html>
效果如下：
父元素只设置成flex，子元素设置一个margin:auto;就搞定了，是不是非常简单，里面的子元素也没有设置固定的宽度。
当然，也可以通过给父元素设置
align-items:center;
justify-content:center;
这两个属性也可以搞定水平垂直居中。如果你还有其他更好的布局用法，欢迎指教。
其他关于前端的技术文章，搜微信公众号“刘小妞的栖息地”或者扫描下面的图片查看吧。
版权声明：本文标题：网页布局——Flex布局，一种简单易学的网页实用布局模式 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1725689143a1036883.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论