一:display:flex 布局
display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
二:flex的六个属性
- flex-direction 容器内元素的排列方向(默认横向排列) 1:flex-direction:row; 沿水平主轴让元素从左向右排列
- flex-wrap 容器内元素的换行(默认不换行) 1:flex-wrap: nowrap; (默认)元素不换行,比如:一个div宽度100%,设置此属性,2个div宽度就自动变成各50%; 2:flex-wrap: wrap; 元素换行,比如:一个div宽度100%,设置此属性,第二个div就在第二行了;
- justify-content 元素在主轴(页面)上的排列 1:justify-content : center;元素在主轴(页面)上居中排列
- align-items 元素在主轴(页面)当前行的横轴(纵轴)方向上的对齐方式 1:align-items : flex-start; 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界(靠上对齐)。
- align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)
#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; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。
2:align-content: flex-end; 元素位于容器的结尾。各行向弹性盒容器的结尾位置堆叠。
4:align-content: center; 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数,该值等效于'flex-start'。
三:flex常见属性总结
- Positional alignment justify-content: center; :居中排列 justify-content: flex-start; /* 从行首起始位置开始排列 / justify-content: flex-end; / 从行尾位置开始排列 */