从零开始学习前端开发 — 12、CSS3弹性布局

一、分栏布局

1.设置栏数column-count:数值;

2.设置每栏的宽度column-width:数值+单位;

注：当设置了column-width，column-count会失效，二者设置其一即可

3.设置栏间距column-gap:数值+单位;

4.设置栏间隔线column-rule:5px solid|dashed|dotted black;

5.设置是否跨栏显示column-span:all(跨栏)|none(不跨栏);

注：a）给需要跨栏显示的元素设置该属性

b) 该属性只有chrome浏览器支持

---

二、弹性布局

说明：

(1) 当给元素设置了display:flex;后，该元素就成为了弹性盒

(2) 当父元素设置了display:flex;后，子元素的float,clear,vertical-align将会失效

(3) 我们将设置display:flex;属性的父元素称为flex容器，里面所有的子元素称为容器成员或flex项目

(4) 当设置了display:flex;后会随之产生两根轴线：主轴和交叉轴

Flex容器属性

1.设置主轴方向语法： flex-direction:row|row-reverse|column|column-reverse;

row 默认值，主轴在水平方向，起点在左端

row-reverse 主轴在水平方向，起点在右端

column 主轴在垂直方向，起点在上沿

column-reverse 主轴在垂直方向，起点在下沿

2.设置flex容器是单行显示还是多行显示语法： flex-wrap:nowrap|wrap|wrap-reverse;

nowrap 默认值，不换行

wrap 换行

wrap-reverse 换行，但行的顺序会倒过来

注：该属性主要针对主轴在水平方向上的时候

3.flex-flow是flex-direction和flex-wrap的简写方式默认值为：flex-flow:row nowrap;

4.设置主轴的对齐方式语法： justify-content:flex-start | flex-end | center | space-between | space-around;

a)flex-start 默认值，类似于左浮动

b)flex-end 类似于右浮动

c)center 居中对齐

d)space-between flex项目两端对齐，中间间隔相等

e)space-around flex项目两侧的间隔相等

5.设置交叉轴对齐方式： align-items:flex-start|flex-end|center|baseline|stretch;

a) flex-start 对齐交叉轴的起点

b) flex-end 对齐交叉轴的终点

c) center 沿交叉轴方向居中对齐

d) baseline 沿flex项目第一行文字基线对齐

e) stretch 当flex项目没有设置高度或为auto时，将占满整个父元素的高度

注：使用弹性盒如何实现不定宽高元素在父元素中水平垂直都居中

方法如下：

父元素{

display:flex;
justify-content:center;
align-items:center;
}

如何使元素在屏幕窗口水平垂直都居中，设置如下：

html,body{height:100%;}

body{

display:flex;
justify-content:center;
align-items:center;
}

6.设置多根轴线的对齐方式： align-content:flex-start|flex-end|center|space-between|space-around|stretch;

a) flex-start 对齐交叉轴的起点

b) flex-end 对齐交叉轴的终点

c) center 以交叉轴为参考，居中对齐

d) space-between 多根轴线两端对齐，轴线之间间隔相等

e) space-around 轴线两侧的间隔相等

f) stretch 如果flex项目没有设置高度或为auto,将会均分父元素的高度

注： 当只有一根轴线时，此属性不起作用

Flex项目属性

1.设置flex项目的排列顺序： order:数值; (值越小越靠前)

2.设置某个flex项目不同于其他flex项目的交叉轴对齐方式(重写父元素的align-items属性): align-self:flex-start|flex-end|center|baseline|stretch;

3.设置flex项目的放大比例： flex-grow:0 | 数值;

注：当父元素存在剩余空间时，默认值为0，不放大

4.设置flex项目的缩小比例： flex-shrink:1|数值;

注：当父元素空间不足时，默认flex项目等比例缩小，flex-shrink默认值为1

flex-shrink:0; 即使父元素空间不足，flex项目也不缩小

5.设置flex项目占据主轴的空间：flex-basis:数值+单位;

注：类似于给元素设置宽高;

6.flex属性是flex-grow，flex-shrink，flex-basis的简写方式默认值： flex:0 1 auto;

flex:1;的两个应用

a) 等比例分配空间

b) 分配剩余空间