初学Flex弹性盒模型

前言

初次学习Flex布局，借此记录整理笔记。

---

一、Flex

介绍

• 弹性盒模型，CSS的一种布局方式，可以代替float使用。
• 元素具有弹性，跟随页面大小变化而变化。

基本概念

1.弹性容器

• 使用Flex布局的基础，即将一个元素设为弹性容器
• 设置方式：
  • 块级弹性容器
  • 行内弹性容器

	display:flex; 
	display:inline-flex;

2.弹性元素

• 弹性容器的子元素为弹性元素
• 可以嵌套声明，即弹性元素也可以为弹性容器

3.主轴

• 弹性元素排列的方向

4.交叉轴（辅轴）

• 与主轴垂直的方向

二、基本属性

1.容器的属性

• flex-direction:
  • 属性值：row(默认值） | row-reverse | column | column-reverse
• flex-wrap:
  • 属性值：nowrap(默认值) | wrap | wrap-reverse
• justify-content:
  • 属性值：flex-start(默认值) | flex-end | center | space-start | space-end | space-evenly
• align-items:
  • 属性值：stretch(默认值) | flex-start | flex-end | center | baseine
• align-content:
  • 属性值：flex-start(默认值) | flex-end | center | space-start | space-end | space-evenly

flex-direction

指定弹性元素排序方式

row

• 水平方向，自左向右，默认值
• 此时主轴方向水平，自左向右

row-reverse

• 水平反方向，自右向左
• 此时主轴方向水平，自右向左

column

• 竖直方向，自上向下
• 此时主轴方向垂直，自上向下

column-reverse

• 竖直反方向，自下向上
• 此时主轴方向垂直，自下向上

	ul{
		display:flex;
        flex-direction: row|row-reverse|column|column-reverse 
    }

flex-wrap

指定元素是否自动换行

nowrap

• 元素不会自动换行，默认值

wrap

• 元素沿辅轴方向自动换行

wrap-reverse

• 元素沿着辅轴反方向自动换行

	ul{
		display:flex;
        flex-direction:row;
        flex-wrap: nowrap|wrap|wrap-reverse;
	}

注意

• flex-flow:
  • wrap和direction的简写属性，属性值无顺序要求，空格分隔

justify-content

指定主轴上剩余空间如何分配（元素在主轴上如何排列）

flex-start

• 默认值，剩余空间不分配
• 元素从主轴起点开始排列

flex-end

• 剩余空间不分配
• 元素从主轴终点开始排列

center

• 元素在主轴上居中排列
• 剩余空间分配在所有元素的两侧

space-around

• 主轴剩余空间分配到每个元素两侧
• 中间空间是边上空间的两倍

space-between

• 主轴剩余空间均匀分配到元素中间

space-evenly

• 主轴剩余空间分配到每个元素的单侧
• 兼容性不高，谨慎使用

	ul{
		display:flex;
        justify-content: flex-start|flex-end|center|space-around|space-between|space-evenly;
	}

align-items

指定元素在辅轴上如何对齐

stretch

• 默认值
• 伸长元素，确保每行元素长度值相同，填满整行（元素未设置高度或高度为auto）

flex-start

• 元素不伸长，沿（每行的）辅轴起点对齐

flex-end

• 元素不伸长，沿（每行的）辅轴终点对齐

center

• 沿（每行的）辅轴居中对齐

baseline

• 以元素首行文字的基线对齐
• 适用于元素文字大小不同，不常用

	ul{
		display:flex;
        align-items: stretch|flex-start|flex-end|center|baseline;
	}

align-content

指定辅轴上剩余空间如何分配（元素在辅轴上如何排列），与 justify-content 属性类似

flex-start

• 默认值，剩余空间不分配
• 元素从辅轴起点开始排列

flex-end

• 剩余空间不分配
• 元素从辅轴终点开始排列

center

• 元素在辅轴上居中排列

space-around

• 辅轴剩余空间分配到每个元素两侧
• 中间空间是边上空间的两倍

space-between

• 辅轴剩余空间均匀分配到元素中间

space-evenly

• 辅轴剩余空间分配到每个元素的单侧
• 兼容性不高，谨慎使用

	ul{
		display:flex;
        align-content: flex-start|flex-end|center|space-around|space-between|space-evenly;
	}

---

2.元素的属性

• order:
  • 属性值：0（默认值）
• flex-grow:
  • 属性值：0（默认值）
• flex-shrink:
  • 属性值：
• flex-basis:
  • 属性值：
• align-self:
  • 属性值：

order

指定元素排列顺序

• 任意数字，数字大的元素排在后面
• 默认值：0

	li:nth-child(1){
		order:2;
	}
		li:nth-child(2){
		order:3;
	}
		li:nth-child(3){
		order:1;
	}

flex-grow

指定元素的增长系数

• 默认值：0
• 将剩余空间按比列分配给元素，即元素按比例增长

	li:nth-child(1){
		flex-grow:0;
	}
		li:nth-child(2){
		flex-grow:3;
	}
		li:nth-child(3){
		flex-grow:1;
	}

flex-shrink

指定元素的缩减系数

• 默认值：1
• 缩减大小与缩减系数和元素自身大小有关

	li:nth-child(1){
		flex-shrink:0;
	}
		li:nth-child(2){
		flex-shrink:2;
	}
		li:nth-child(3){
		flex-shrink:15;
	}

flex-basis

指定元素在主轴上的初始大小

• 主轴如果水平，则指定元素宽度；如果竖直，则指定元素高度
• 默认值：auto（元素自身的高度或宽度）
• 传值则改变元素的高度或宽度

	ul{
		dispaly:flex;
		flex-direction:row;
	}
	li:nth-child(1){
		flex-basis:auto;
	}
		li:nth-child(2){
		flex-basis:100px;
	}
		li:nth-child(3){
		flex-basis:10px;
	}

	ul{
		dispaly:flex;
		flex-direction:column;
	}
	li:nth-child(1){
		flex-basis:auto;
	}
		li:nth-child(2){
		flex-basis:100px;
	}
		li:nth-child(3){
		flex-basis:10px;
	}

注意

flex:

• flex-grow 和 flex-shrink 和 flex-basis的简写属性，属性值有固定顺序
• 属性值：
  • initial：
    相当于 flex: 0 1 auto;
    元素不会增长，但会缩减，会根据自身宽高设置尺寸
  • auto：
    相当于 flex: 1 1 auto;
    元素会增长，会缩减，会根据自身宽高设置尺寸
  • none
    相当于 flex: 0 0 auto;
    元素完全非弹性，不会增长，不会缩减，但会根据自身宽高设置尺寸

align-self

覆盖当前元素上的align-items

stretch

• 默认值
• 仅伸长此元素，填满整行（元素未设置高度或高度为auto）

flex-start

• 不伸长此元素，仅使它沿（该行的）辅轴起点对齐

flex-end

• 不伸长此元素，仅使它沿（该行的）辅轴终点对齐

center

• 使此元素沿（该行的）辅轴居中对齐

baseline

• 以元素首行文字的基线对齐
• 适用于元素文字大小不同，不常用

	ul{
		display:flex;
		align-items:flex-start;
	}

	li:nth-child(1){
		align-self:stretch;
	}

	ul{
		display:flex;
		align-items:stretch;
	}
	li:nth-child(2){
		align-self:flex-start;
	}

	ul{
		display:flex;
		align-items:stretch;
	}
	li:nth-child(3){
		align-self:flex-end;
	}

	ul{
		display:flex;
		align-items:stretch;
	}
	li:nth-child(4){
		align-self:center;
	}

	ul{
		display:flex;
		align-items:stretch;
	}
	li:nth-child(5){
		align-self:baseline;
	}

---

附

学习视频：尚硅谷新版Web前端HTML5+CSS全套基础教程完全版（131,133-134集）