一、分栏布局
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的默认值为:
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是flex-grow,flex-shrink,flex-basis的简写方式
默认值: flex:0 1 auto;
flex:1;的两个应用
a) 等比例分配空间
b) 分配剩余空间
原文地址:https://www.cnblogs.com/witkeydu/p/8206726.html