css3弹性布局

一、多列布局(分栏布局)

1.设置栏数(最大栏数)

语法：column-count:数值;

2.设置每栏的宽度(每栏最小宽度)

语法：column-width:数值+单位;

3.设置栏间距

语法：column-gap:数值+单位;

4.设置栏分隔线

语法：column-rule:宽度 solid|dashed|dotted 颜色;

5.设置是否跨栏显示

语法：column-span:all(是)|none(否);

注：该属性给需要跨栏显示的元素添加

二、弹性布局

语法：display:flex;

作用：让网页显示更加灵活

♥ 说明

a) 给元素设置display:flex;就成为了弹性盒

b) 给父元素设置弹性布局后，子元素的float,clear,vertical-align将会失效

c) 我们把设置display:flex;的父元素叫做Flex容器，把里面的子元素叫做Flex项目

d) 设置了弹性盒后，随之产生两根轴线：主轴和交叉轴(侧轴)

☆ flex容器属性

1.设置主轴的方向(flex项目排列的方向)

语法：flex-direction:row|row-reverse|column|column-reverse;

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

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

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

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

2.设置flex项目一行还是多行显示

语法：flex-wrap:nowrap|wrap|wrap-reverse;

nowrap 默认值，flex项目在一行显示

wrap flex项目换行，多行显示

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

3.flex-direction和flex-wrap简写方式

语法：flex-flow:row nowrap; (默认值)

4.设置主轴对齐方式

语法: justify-content:flex-start|flex-end|center|space-between|space-around;

flex-start 对齐主轴的起点

flex-end 对齐主轴的终点

center 居中对齐

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

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

5.交叉轴对齐方式

语法：align-items:flex-start|flex-end|center|baseline|stretch;

flex-start 对齐交叉轴的起点

flex-end 对齐交叉轴的终点

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

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

stretch flex项目没有设置高度或者为auto,将占满整个父元素的高度

---

★ 使用flex布局的方式实现未知大小的元素在屏幕窗口水平垂直都居中

html,body{height:100%;}

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

★ 使用弹性盒的方式实现未知大小的子元素在父元素中水平垂直都居中

父元素{display:flex;justify-content:center;align-items:center;}

---

6.多根轴线对齐方式(如果只有一行，该属性不起作用)

语法: align-content:flex-start|flex-end|center|space-between|space-around|stretch;

flex-start 对齐交叉轴的起点

flex-end 对齐交叉轴的终点

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

space-between 两端对齐，轴线之间间隔相等

space-around 轴线两侧间隔相等

stretch flex项目没有设置高度或者为auto，将均分父元素的高度

☆ flex项目属性

1.设置flex项目排列顺序

语法：order:0|1|数值;

注：默认值为0，值越小越靠前

2.设置某个flex项目不同于其他flex项目的交叉轴对齐方式

语法：align-self:flex-start|flex-end|center|baseline|stretch;

3.设置flex项目的放大比例

语法：flex-grow:0|1|数值;

注：flex-grow的默认值为0，即使存在剩余空间，也不放大

4.设置flex项目的缩小比例

语法：flex-shrink:1|0|数值;

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

b) flex-shrink设置为0时，flex项目即可以在一行显示，也不会缩小

5.在分配剩余空间之前，设置flex项目占据主轴的空间

语法：flex-basis:数值+单位|百分比;

6.flex-grow,flex-shrink,flex-basis的简写方式

语法：flex:0 1 auto; (默认值)

注：flex:1; 等价于 flex:1 1 0%;

a) 应用一：flex项目等比例分配空间

b) 应用二：分配剩余空间给某个flex项目