CSS 设置 flex 布局
布局的传统解决方案,基于 盒状模型(box model),依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
网页布局(layout)之中的 弹性布局( flexible box),主要用来为 盒状模型 提供最大的灵活性。
special items:
- flex container:采用 flex 布局的元素;
- flex item:flex 项目,flex 容器的所有子元素会自动成为该容器的项目成员,即 flex 项目。
文章目录
容器框架轴 | |
---|---|
水平 | 主轴(main axis) |
垂直 | 交叉轴(cross axis) |
**主轴(水平方向)**默认排列 | |
开始(left) | main start |
末尾(right) | main end |
交叉轴(垂直方向) | |
开始(top) | cross start |
末尾(bottom) | cross end |
主轴空间 (width) | main size |
交叉轴空间 (height) | main height |
排列方向及换行
flex 属性:flex-direction
<style> /* 基本语法*/ .box {flex-direction: column-reverse | column | row | row-reverse;} </style>
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .container{ border: 1px solid black; display: flex; flex-direction: column-reverse; } .item{ width: 50px; height: 50px; background-color: gold; border: 1px solid red; } </style> </head> <!--小程序将 div 换成 view ,body 换成 page--> <body> <div class="container"> <div class="item"> 1</div> <div class="item"> 2</div> <div class="item"> 3</div> <div class="item"> 4</div> </div> </body> </html>
flex 属性:flex-wrap
<style> /* 基本语法*/ .box{ flex-wrap: nowrap | wrap | wrap-reverse; } </style>
- nowrap(默认):不换行。
- wrap:换行,第一行在上方。
- wrap-reverse:换行,第一行在下方。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .container{ border: 1px solid black; display: flex; flex-direction: row; flex-wrap: wrap-reverse; } .item{ width: 100px; height: 100px; background-color: gold; border: 1px solid red; } </style> </head> <!--小程序将 div 换成 view ,body 换成 page--> <body> <div class="container"> <div class="item"> 1</div> <div class="item"> 2</div> <div class="item"> 3</div> <div class="item"> 4</div> <div class="item"> 5</div> <div class="item"> 6</div> <div class="item"> 7</div> </div> </body> </html>
flex 属性:flex-flow
flex-direction 属性和 flex-wrap 属性的 简写形式
<style> /* 基本语法*/ /* 默认 row nowrap*/ .box { flex-flow: <flex-direction> <flex-wrap>; } </style>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .container{ border: 1px solid black; display: flex; flex-direction: row; flex-flow:row-reverse wrap; /* 敲黑板*/ } .item{ width: 100px; height: 100px; background-color: gold; border: 1px solid red; } </style> </head> <!--小程序将 div 换成 view ,body 换成 page--> <body> <div class="container"> <div class="item"> 1</div> <div class="item"> 2</div> <div class="item"> 3</div> <div class="item"> 4</div> <div class="item"> 5</div> <div class="item"> 6</div> <div class="item"> 7</div> </div> </body> </html>
项目伸缩及宽度
flex 属性:flex-grow
定义项目的放大比例,默认为0,即就算存在剩余空间,也不放大。
如果所有项目的 flex-grow 属性都为1,则它们将等分剩余空间(前提是还有剩余空间的话)。
如果一个项目的 flex-grow 属性为2,其他项目都为 1,则前者占据的剩余空间将比其他项 多一倍。
<style> /* 基本语法*/ /* default 0 */ .item { flex-grow: 具体数字; } </style>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .container3{ margin: 10px; border: 1px solid black; width: 300px; height: 50px; background: red; display: flex; flex-wrap: wrap; } .item{ width: 20px; background-color: gold; border: 1px solid red; /*flex-grow: 3;*/ } .item_3{ width: 20px; background-color: gold; border: 1px solid red; /*flex-grow: 2;*/ } .item_4{ display: flex; width: 20px; background-color: gold; border: 1px solid red; /*flex-grow: 1;*/ } </style> </head> <!--小程序将 div 换成 view ,body 换成 page--> <body> <div class="container3"> <div class="item"> 1</div> <div class="item"> 2</div> <div class="item_3"> 3</div> <div class="item_4"> 4</div> </div> </body> </html>
<style> /* 分别加上以下属性*/ .item{ flex-grow: 3; } .item_3{ flex-grow: 2; } .item_4{ flex-grow: 1; </style>
flex 属性:flex-shrink
定义了项目的缩小比例,默认为1,即当空间不足时,该项目将缩小。
如果所有项目的flex-shrink属性都为1,此时容器的空间又不足,项目都将等比例缩小。
如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
<style> /* 基本语法*/ /* default 1 */ .item { flex-shrink: 具体数字,不能设置负值; } </style>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .container3{ margin: 10px; border: 1px solid black; width: 300px; height: 50px; background: red; display: flex; } .item{ width: 100px; background-color: gold; border: 1px solid red; } .item_4{ display: flex; width: 200px; background-color: gold; border: 1px solid red; display: flex; /* 不添加 flex-shrink: 2;*/ /* item_4 没有收缩*/ } </style> </head> <!--小程序将 div 换成 view ,body 换成 page--> <body> <div class="container3"> <div class="item"> 1</div> <div class="item"> 2</div> <div class="item"> 3</div> <div class="item_4"> 4</div> </div> </body> </html>
<style> .item_4{ display: flex; width: 200px; background-color: gold; border: 1px solid red; display: flex; flex-shrink: 2; /* 添加之后,item_4 空间缩小*/ } </style>
flex 属性:flex-basis
设置或检索 弹性盒 伸缩基准值,即项目在主轴上占据的空间,如果元素不是弹性盒对象的元素,则 flex-basis 属性不起作用。此种方式如同 width 和 height 的作用,但即使设置长度超过容器也不会超出容器。
<style> /* 基本语法*/ .item { flex-basis: number|auto|initial|inherit; } </style>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .container3{ margin: 10px; border: 1px solid black; width: 300px; height: 50px; background: red; display: flex; } /* 容器内的项目总宽度超出了容器,会按照比例缩小,不会超出容器*/ .item{ background-color: gold; border: 1px solid red; flex-basis: 400px; /* 宽度400px*/ } .item_4{ background-color: gold; border: 1px solid red; flex-basis: 80px; /* 宽度80px*/ } </style> </head> <!--小程序将 div 换成 view ,body 换成 page--> <body> <div class="container3"> <div class="item"> 1</div> <div class="item"> 2</div> <div class="item"> 3</div> <div class="item_4"> 4</div> </div> </body> </html>
flex 属性:flex
flex属性是 flex-grow , flex-shrink 和 flex-basis 的简写,默认值为0 1 auto,后两个属性可选。
<style> /* 基本语法*/ .item { flex: <'flex-grow'><'flex-shrink'><'flex-basis'>} /* 默认:0 1 auto*/ /* 快捷值 auto:1 1 auto*/ /* 快捷值 none:0 0 auto*/ </style>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .container3{ margin: 10px; border: 1px solid black; width: 300px; height: 50px; background: red; display: flex; } .item{ background-color: gold; border: 1px solid red; flex: 0 1 10px; /* 0 不伸,1 不缩,10px 宽度*/ } .item_4{ background-color: gold; border: 1px solid red; flex: 0 1 20px; /* 0 不伸,1 不缩,20px 宽度*/ } </style> </head> <!--小程序将 div 换成 view ,body 换成 page--> <body> <div class="container3"> <div class="item"> 1</div> <div class="item"> 2</div> <div class="item"> 3</div> <div class="item_4"> 4</div> </div> </body> </html>
<style> .item{ background-color: gold; border: 1px solid red; flex: 1 1 10px; /* 1 伸,1 不缩,10px 宽度*/ } .item_4{ background-color: gold; border: 1px solid red; flex: 2 1 10px; /* 2 伸,且占据多一倍的空间,1 不缩,10px 宽度*/ } </style>
水平及垂直对齐方案
flex 属性:justify-content
定义了项目在主轴(水平方向)上的对齐方式。
<style> /* 基本语法*/ .box { justify-content: flex-start | flex-end | center | space-between | space-around;} </style>
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
flex 属性:align-items
定义项目在交叉轴(垂直方向)上的排列
<style> /* 基本语法*/ /* 多联系 baseline stretch*/ .box { align-items: flex-start | flex-end | center | baseline | stretch;} </style>
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .container{ height: 200px; /* 容器的height*/ border: 1px solid black; display: flex; flex-direction: row; align-items: stretch; /* 内部项目没有设置height, 会自动上下充满容器的 height*/ } .item{ width: 100px; /* 容器内的项目没有设置 height*/ background-color: gold; border: 1px solid red; } </style> </head> <!--小程序将 div 换成 view ,body 换成 page--> <body> <div class="container"> <div class="item"> 1</div> <div class="item"> 2</div> <div class="item"> 3</div> <div class="item"> 4</div> <div class="item"> 5</div> <div class="item"> 6</div> <div class="item"> 7</div> </div> </body> </html>
<style> .container{ height: 200px; border: 1px solid black; display: flex; flex-direction: row; align-items: stretch; /* 如果容器内的项目 height 已经设置固定值,容器使用 stretch 也不会使容器充满*/ } .item{ width: 100px; height: 150px; background-color: gold; border: 1px solid red; } </style>
<style> .container{ height: 200px; border: 1px solid black; display: flex; flex-direction: row; align-items: center; /* 改成 center 则会居中对齐,不会充满*/ } </style>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .container{ height: 200px; border: 1px solid black; display: flex; flex-direction: row; align-items: baseline; /* 项目的第一行文字的基线对齐*/ } .item{ width: 100px; height: 150px; background-color: gold; border: 1px solid red; } </style> </head> <!--小程序将 div 换成 view ,body 换成 page--> <body> <div class="container"> <!--只设置一个 padding,由于 align-items:baseline 的作用,也会引起 文字底部对齐,而是其它的也跟着往下移动了 20px--> <div class="item" style="padding: 20px;"> 1</div> <div class="item"> 2</div> <div class="item"> 3</div> <div class="item"> 4</div> <div class="item"> 5</div> <div class="item"> 6</div> <div class="item"> 7</div> </div> </body> </html>
flex 属性:align-self
允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。
<style> /* 基本语法*/ .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } /* 默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch, 除了auto,其他都与align-items属性完全一致*/ </style>
flex 属性:align-content
定义了多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用,例如,当有多少 2 行及以上的div,就有多少 2 行及以上的主轴。
<style> /* 基本语法*/ .box { align-content: flex-start | flex-end | center | space-between | space-around | stretch;} </style>
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等,所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ height: 500px; border: 1px solid black; display: flex; flex-wrap: wrap; /* 不换行,则就只有一个主轴,因此换行 wrap 必不可少*/ /* 主轴(水平方向)分别为container,container2,container3*/ align-content: space-between; } .container,.container2{ height: 100px; width: 100%; border: 1px solid black; background: red; display: flex; flex-direction: row; align-items: baseline; } .container3{ border: 1px solid black; height: 50px; background: red; display: flex; flex-wrap: wrap; } .item{ width: 100px; background-color: gold; border: 1px solid red; } </style> </head> <!--小程序将 div 换成 view ,body 换成 page--> <body> <div class="container"> <div class="item"> 1</div> <div class="item"> 2</div> <div class="item"> 3</div> <div class="item"> 4</div> </div> <div class="container2"> <div class="item"> 1</div> <div class="item"> 2</div> <div class="item"> 3</div> <div class="item"> 4</div> </div> <div class="container3"> <div class="item"> 1</div> <div class="item"> 2</div> <div class="item"> 3</div> <div class="item"> 4</div> </div> </body> </html>
项目排列先后次序
flex 属性:order
设置弹性盒对象元素的顺序,数值越小,排列越靠前,默认为0。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .container3{ margin: 10px; border: 1px solid black; width: 300px; height: 50px; background: red; display: flex; /* 必须加上 display: flex; 否则无效*/ } .item{ background-color: gold; border: 1px solid red; flex: 1 1 10px; order: 1; /* 然后排列*/ } .i2{ order: 2; /* 最后排列*/ } .item_4{ background-color: gold; border: 1px solid red; flex: 2 1 10px; order: 0; /* 先排列 默认值*/ } </style> </head> <!--小程序将 div 换成 view ,body 换成 page--> <body> <div class="container3"> <div class="item"> 1</div> <div class="item i2"> 2</div> <div class="item"> 3</div> <div class="item_4"> 4</div> </div> </body> </html>
- flex 布局下,css 设置文本不换行时,省略号不显示的解决办法
- 小程序–flex布局常用css 设置
- CSS中的Flex布局
- 第六章2:弹性布局语法(比CSS盒模型更方便、优化的Flex 布局语法)
- css布局之爱上flex
- CSS弹性盒模型flex在布局中的应用
- Flex 布局教程:语法篇(css)
- css基础精华---Flex 布局教程:实例篇
- 用DIV+CSS布局中,如何设置图片与文字在同一高度?
- 流式布局之2012年语法-------------------CSS3盒模型display:flex
- Flex4 css中skin设置报错解决
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度
- 详解CSS中flex布局
- css3属性flex弹性布局设置三列(四列)分布样式
- flex布局兼容性css文件
- flex布局踩过的坑:flex速记设置flex-grow和直接设置flex-grow的浏览器表现差异
- CSS魔法堂:Flex布局
- CSS进阶系列一(flex布局基础知识——介绍、规范、主要思想、专业术语)
- 基于flex弹性布局实现“头尾固定,中间滚动”的页面(纯CSS实现)
- css 之 flex 弹性布局浅浅的理解