从零开始学习前端开发 — 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) 分配剩余空间

 

posted @ 2018-01-05 20:52  Rocky-Long  阅读(498)  评论(0编辑  收藏  举报