CSS 之 flex 布局
2017-08-09 本文已影响21人
Look_a_Look
Flexbox布局方式可以实现自动调整、计算子元素在任意父容器内的布局和大小。
声明一个Flex容器（Flex Container），其子元素为Flex项目（Flex Items）
display:flex 或者 display:inline-flex
Flex容器有如下属性
Flex项目的排列方向：行（水平）、列（垂直）或者行和列的反向，注意：改变方向会改变 Main-Axis 和 Cross-Axis 指向（Main-Axis为当前方向）
flex-direction : row || column || row-reverse || column-reverse; 默认是 row
Flex 项目换行排列
flex-wrap : wrap || nowrap || wrap-reverse; 默认是 nowrap
flex-flow是flex-direction和flex-wrap两个属性的简写属性。
flex-flow : row wrap;
justify-content 控制Flex容器内整体在垂直方向上的排列方式。左、右、居中、两端。
justify-content : flex-start || flex-end || center || space-between || space-around
align-items 控制Flex项目的水平对齐方式。拉伸、顶部、尾部、居中对齐。
align-items : stretch || flex-start || flex-end || center || baseline
align-content 控制Flex容器内整体在水平方向上的排列方式。拉伸、开始、结束、居中。
align-content : stretch || flex-start || flex-end || center;
Flex项目有如下属性
order 可以指定Flex项目的顺序
order 可以接受一个数字，负数或0或整数，越大顺序越靠后
flex-grow 控制Flex项目是否自动填充容器的空余部分
flex-grow 为0或一个正数，默认为 0，不填充。填充宽度会按占所有flex-grow总和的比例来计算。
flex-shrink 控制Flex项目在容器没有额外空间时是否折叠
flex-shrink 为0或一个正数，默认是1，会折叠
flex-basis 属性可以指定Flex项目的初始大小。
flex-basis 支持任何单位，当数值为0时也要写明单位。默认是 auto
flex 是flex-grow、flex-shrink和flex-basis三个属性的简写
flex: 0 1 auto; 默认值
----
flex: 1 1; 在flex中，flex-basis 默认值为 0, 绝对flex项目(项目宽度根据 flex 属性 来确定，与内容大小无关)
----
flex-basis : 150px;只有当你设置了,相对flex项目(项目宽度根据 内容大小 来确定)
---
flex: 0 0 auto; 相当于 flex: none;
---
flex: 1 1 auto; 相当于 flex: auto;
align-self 改变弹性项目沿着侧轴的位置，而不影响相邻的弹性项目
align-self: auto || flex-start || flex-end || center || baseline || stretch
margin 对齐
当在一个Flex项目上使用自动外边距（margin: auto）时，justify-content 属性就不起作用了
参考网站:http://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html
练习代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
ul {
display: flex;
flex-wrap: wrap;
}
li {
margin: 5px;
/*width: 200px;*/
/*height: 200px;*/
/*flex-grow: 0;*/
/*flex-shrink: 1;*/
flex-basis: 100px;
list-style: none;
background-color: #337C7E;
}
</style>
<body>
<ul>
<li> This is just some random text to buttress the point being explained.
Some more random text to buttress the point being explained.I am a simple list 1</li>
<li>I am a simple list 2</li>
<li>I am a simple list 3</li>
<li>I am a simple list 4</li>
<li>I am a simple list 5</li>
</ul>
</body>
</html>
