flex
1. 术语
- 容器: 具有
display:flex属性元素 - 项目: flex 容器的”子元素”
- 主轴: 项目排列的轴线
- 交叉轴: 与主轴垂直的轴线
2. 容器属性
| 序号 | 属性 | 描述 |
|---|---|---|
| 1 | flex-flow |
主轴方向与换行方式 |
| 2 | justify-content |
项目在主轴上的对齐方式 |
| 3 | align-items |
项目在交叉轴上的对齐方式 |
| 4 | align-content |
项目在多行容器中的对齐方式 |
3. 项目属性
| 序号 | 属性 | 描述 |
|---|---|---|
| 1 | flex |
项目的缩放比例与基准宽度 |
| 3 | align-self |
单个项目在交叉轴上的对齐方式 |
| 4 | order |
项目在主轴上排列顺序 |
容器属性 代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>flex容器 容器属性</title><style>main{/* width: 30em; */height: 20em;background-color: lightskyblue;display: flex;/* flex-flow 主轴方向与换行方式 *//* flex-flow: row nowrap;默认为水平排列 不换行 ,wrap为换行显示*/flex-flow: row nowrap;/* flex-flow: column;垂直方向排列 */flex-flow: column;}/* justify-content 项目在主轴上的对齐方式 */main{/* 水平方向 *//* justify-content: flex-start;左对齐默认值 */justify-content: flex-start;/* justify-content: flex-end;右对齐 */justify-content: flex-end;/* justify-content: center;居中对齐 */justify-content: center;/* 将项目视为一个个独立的个体,在项目之间进行分配 *//* justify-content: space-between; 二端对齐 */justify-content: space-between;/*justify-content: space-around; 分散对齐 */justify-content: space-around;/*justify-content: space-evenly; 平均对齐 */justify-content: space-evenly;}main{/* 垂直方向 *//* align-items: stretch;默认值元素被拉伸以适应容器 *//* align-items: stretch; *//* align-items: flex-start;元素位于容器的开头弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 */align-items: flex-start;/* align-items: flex-end; 元素位于容器的结尾，弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 */align-items: flex-end;/* align-items: center;元素位于容器的中心，弹性盒子元素在该行的侧轴（纵轴）上居中放置，（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 */align-items: center;}.div{width: 5em;/* height: 3em; */background-color: lightsalmon;line-height: 3em;text-align:center;}</style></head><body><main><div class="div">div1</div><div class="div">div2</div><div class="div">div3</div><div class="div">div4</div><div class="div">div5</div></main></body></html>
flex项目属性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title> flex项目属性</title><style>main{/* width: 30em; */height: 20em;background-color: lightskyblue;display: flex;/* 分散对齐 */justify-content: space-between;}.div{width: 5em;height: 3em;background-color: lightsalmon;line-height: 3em;text-align:center;}/* flex: flex-grow flex-shrink flex-basis *//* flex: 放大因子 收缩因子 项目在主轴上的基准宽度 *//* 默认会上,不放大或收缩 */.div{/* 默认值 */flex: 0 1 auto;/* 也可写成 */flex: initial;/* 允许放大和收缩 */flex: 1 1 auto;/* 缩写 */flex: auto;/* 禁止放大和收缩 */flex: 0 0 auto;/* 缩写 */flex: none;/* 如果只有一个数字,省掉后面二个参数,表示的放大因子 */flex: 1;/* 等于 flex: 1 1 auto; 值越大放大的倍数远大*//* flex通常不会用来设置所有项目的默认选项,通常用来设置某一个项目的特征 */}</style></head><body><main><div class="div">div1</div><div class="div">div2</div><div class="div">div3</div><div class="div">div4</div><div class="div">div5</div></main></body></html>
弹性布局小案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>flex弹性布局</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}header,footer{height: 8vh;background-color: darksalmon;}.container{height: 82vh;display: flex;margin: 1em 0;}.container>aside{width: 20em;min-height: inherit;background-color: khaki;}.container main{flex: 1;background-color: lawngreen;margin: 0 1em;}</style></head><body><header>页眉</header><div class="container"><aside>左边栏</aside><main>主体</main><aside>右边栏</aside></div><footer>页脚</footer></body></html>
