CSS - 布局技巧及flex布局

根据上一篇文章的总结介绍, 可以得出一般布局技巧:

1. 垂直布局, 使用 标准流
2. 水平布局, 使用 浮动流
3. 层叠布局, 使用 定位流
4. 子绝父相, 给绝对定位元素的父元素设置 position : relative, 方便更好的进行布局

在本文开始之前, 先总结2个布局相关公式

1. 标准流包含块宽度 = 子元素实际占用宽度 + margin-left + margin-right
2. 绝对定位包含块宽度 = 子元素事件占用宽度 + margin-left + margin-right + left + right

根据这2公式, 可以得出以下技巧:

1. 通过给标准流包含块设置负值左右外边距, 可以增加子元素的实际占用宽度
2. 绝对定位元素不设置宽高, 只设置left : 0;right : 0;top : 0;bottom : 0;margin : auto可填充整个包含块

居中技巧

在一个网页中, 使用最多的布局就是元素在父元素居中, 以下是元素居中的一些技巧

水平居中

1. 在标准流中, 对于行内级/行内块级元素, text-align : center
2. 在标准流中, 对于块级元素, 设置宽度( width ), 左右外边距( margin )设为auto
3. 在定位流中, 对于相对定位元素, margin-left : 50%; left : -元素宽度/2
4. 在定位流中, 对于绝对定位元素, 设置宽度( width ), 然后设置 left : 0; right : 0; margin-left : auto; margin-right : auto

垂直居中

1. 对于单行文本, line-height : 元素高度
2. 对于行内级/行内块级元素, 可尝试使用 vertical-align : middle
3. 对于相对定位元素, margin-top : 50%; top : -元素高度/2
4. 对于绝对定位元素, 设置高度( height ), 然后设置 top : 0; bottom : 0; maigin-top : auto; margin-bottom : auto

vertical-align属性

设置元素的垂直对齐方式

语法: vertical-align : val

注意点: 只对行内级/行内块级元素生效

可选值:

1. baseline 默认值, 基线对齐
2. sub 对齐文本下标
3. super 对齐文本上标
4. top 对齐父元素顶部
5. text-top 对齐字体顶部
6. bottom 对齐父元素底部
7. text-bottom 对齐字体底部
8. middle 对齐父元素中线(中部)

Flex布局

Flexible Box(简称: Flex), “弹性盒子”, CSS3新增的盒模型布局方式

起步

任何一个容器都能指定为Flex布局

.container {
    display : flex;
}

行内Flex布局

.container {
    display : inline-flex;
}

注意点, 当设为Flex布局后, 容器中所有元素的float、clear、vertical-align 属性将失效

基本概念

设为Flex布局的元素称为Flex容器(flex container), 简称”容器”, 起所有子元素称为Flex项目(flex item), 简称”项目”

项目是参照容器的两根轴进行布局的:

1. 主轴(main axis), 默认水平方向
2. 侧轴(交叉轴, cross axis), 垂直于主轴

容器图解: main start(主轴开端)、main end(主轴末端)、cross start(侧轴开端)、cross end(侧轴末端)

项目图解: main size — 项目占据主轴的空间、cross size — 项目占据侧轴的空间

容器属性

1. flex-direction

   设置主轴方向, 语法: flex-direction : val

   属性值:

   a) row 默认值, 水平, 从左到右

   b) row-reverse 水平, 从右到左

   c) column 垂直, 从上打下

   d) column-reverse 垂直, 从下到上

   

2. flex-wrap

   设置换行处理, 语法: flex-wrap : val

   属性值:

   a) nowrap 默认值, 不换行

   b) wrap 换行, 第一行在最上方

   c) wrap-reverse 换行, 第一行在最下方

3. flex-flow

   flex-direction 和 flex-wrap 的整合属性, 语法: flex-flow : <direction> <wrap>

   默认值: row nowrap

4. justify-content

   设置项目在主轴上的对齐方式, 语法: justify-content : val

   属性值:

   a) flex-start 默认值, 向主轴开端对齐

   b) flex-end 向主轴末端对齐

   c) space-between 主轴两端对齐, 项目之间的间隔相等

   d) space-around 每个项目的两侧的间隔相等

   e) center 主轴方向居中

   

5. align-items

   设置项目在侧轴上的对齐方式, 语法: align-items : val

   属性值:

   a) stretch 默认值, 如果项目没有设置侧轴空间( cross size ), 默认填充整个容器侧轴长度

   b) flex-start 向侧轴开端对齐

   c) flex-end 向侧轴末端对齐

   d) baseline 项目第一行文本的基线对齐

   e) center 侧轴方向居中

   

6. align-content

   当设置了flex-wrap : wrap|wrap-reverse且项目换行显示时, 此属性才生效

   语法: align-content : val

   属性值:

   a) stretch 默认值, 项目侧轴空间平分侧轴长度

   b) flex-start 向侧轴开端对齐

   c) flex-end 向侧轴末端对齐

   d) space-between 侧轴两端对齐, 每行项目之间间隔相等

   e) space-around 每行项目上下侧间隔相等

   f) center 侧轴方向居中

   

项目属性

1. flex-grow

   设置项目的放大比例, 语法: flex-grow : number

   默认值: 0, 表示即使存在剩余空间也不放大

   当所有项目设为1, 则平分剩余空间; 如有有一个项目设为2, 则该项目所占得剩余空间是其他项目的2倍

2. flex-shrink

   设置项目的缩小比例, 语法: flex-shrink : number

   默认值: 1, 表示空间不足时, 项目缩小

   当一个项目设为0, 其他项目为默认值1, 则当空间不足时, 该小木不缩小

3. flex-basis

   设置在分配剩余空间前, 项目的主轴空间( main size ), 浏览器也是通过此属性判断是否有剩余空间

   默认值: auto, 即项目本来的大小

4. flex

   flex-grow、flex-shrink、flex-basis的整合属性

   语法: flex : <grow> [shrink] [basis]

   默认值: 0 1 auto, 后2属性可省略

   注意点:

   a) auto(1 1 auto) 和 none(0 0 auto)

   b) 建议优先使用此整合属性

5. order

   设置项目的排列顺序, 语法: order : number

   默认值: 0, 值越小越靠前, 支持负数

6. align-self

   单独设置项目的侧轴的对齐方式, 语法: align-self : val

   默认值: auto, 表示继承容器的align-items属性, 其他取值与align-items一样

三栏布局(双飞翼布局、圣杯布局)

浮动流实现

CSS部分

.box {
    height: 50px;
    background: #000;
}

.left {
    width: 100px;
    height: 50px;
    background: pink;
    float: left;
}

.right {
    width: 100px;
    height: 50px;
    background: pink;
    float: right;
}

.center {
    height: 50px;
    background: skyblue;
    margin: 0 100px;
}

html部分

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

定位流实现

CSS部分

.box {
    height: 50px;
    background: #000;
    position: relative;
}

.left {
    width: 100px;
    height: 50px;
    background: pink;
    position: absolute;
    left: 0;
}

.right {
    width: 100px;
    height: 50px;
    background: pink;
    position: absolute;
    right: 0;
}

.center {
    height: 50px;
    background: skyblue;
    position: absolute;
    left: 100px;
    right: 100px;
}

html部分

<div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

Flex布局

CSS部分

.box {
    height: 50px;
    background: #000;
    display: flex;
}

.left {
    width: 100px;
    height: 50px;
    background: pink;
}

.right {
    width: 100px;
    height: 50px;
    background: pink;
}

.center {
    height: 50px;
    background: skyblue;
    flex: 1;
}

html部分

<div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>