css flex布局

使用Sass优雅并高效的实现CSS中的垂直水平居中

移动端总结

布局神器：display:flex

css3中提出了一种新的布局模式：弹性盒子（flex box）。

它是一种当页面需要适应不同的屏幕大小和设备类型时确保元素拥有恰当的行为的布局方式。

目的是更好的对一个容器中的子元素进行排列，对齐，和分配空白空间。

弹性盒子由弹性容器（flex container）和弹性子元素（flex item）组成。

弹性容器通过设置display的值为flex/inline-flex来将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

 

下面是弹性盒子10个常用属性：

 

display：指定html元素盒子类型。

display: flex;

 

flex-direction：指定了弹性子元素在父容器中的位置。

flex-direction的值有：

row：默认排列方式，左对齐（横向从左到右排列）；

row-reverse：右对齐，反转横向排列；

column：纵向排列；

column-reverse：反转纵向排列。

 

justify-content：弹性盒子在横轴上的对齐方式。

justify-content的值有：

flex-start：默认值，水平方向上，左对齐；

flex-end：水平方向上，右对齐；

center：水平方向上，居中对齐；

space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙；

space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。

 

align-items：弹性盒子元素在纵轴方向上的对齐方式。

align-items的值有：

flex-start：垂直方向上，上对齐；

flex-end：垂直方向上，下对齐；

center：垂直方向上，居中对齐；

baseline：垂直方向上，与基线对齐；

stretch：垂直方向上，拉伸对齐。

 

flex-wrap：指定弹性盒子的子元素超出父容器时是否换行。

flex-wrap的值有：

nowrap：默认，不换行；

rap：换行；

rap-reverse：反转wrap排列。

 

align-content：修改flex-wrap属性的行为，类似align-items，不是设置子元素对齐，而是行对齐。

 

flex-flow：flex-direction和flex-wrap的简写。

 

 

order：弹性盒子的子元素排列顺序。

用整数值来定义排列顺序，数值小的排在前面，可以为负值。

 

align-self：弹性子元素使用，覆盖容器的align-items属性。

弹性元素自身在纵轴上的对齐方式。

 

flex：设置弹性盒子的子元素如何分配空间。

flex的值有：

auto：1 1 auto；

initial：0 1 auto；

none：0 0 auto；

inherit：从父元素继承；

[flex-grow]：扩展比率；

[flex-shrink]：收缩比率；

[flex-basis]：默认基准值。