多行自适应,多列自适应,间隔也能自适应,任意对齐

Flex 弹性布局(****************************************************)_ide



创建弹性容器 flex container

display: block | inline | inline-block | none | flex



弹性元素 flex item

是不是flex container 弹性容器中所有的子元素都是 弹性元素呢?

不是的,只有弹性容器,在文档流中的直接子元素(不包含孙子元素 )才是弹性元素。



flex 布局特性

排列和方向

flex排列和方向的属性

描述

flex-direction

弹性的方向

flex-wrap

弹性的换行

flex-flow

弹性的流

order

弹性的顺序



flex-direction

flex-direction取值

描述

row

row-reverse

从右向左

column

从上到下

column-reverse

从下到上


row (flex-direction默认值)

Flex 弹性布局(****************************************************)_ide_02



row-reverse

Flex 弹性布局(****************************************************)_css_03


column

Flex 弹性布局(****************************************************)_取值_04


column-reverse

Flex 弹性布局(****************************************************)_html_05


举个栗子:

Flex 弹性布局(****************************************************)_取值_06

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>flex direction</title>     <style type="text/css">     .container{margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}     .item{margin: 10px;line-height: 40px;text-align: center;background-color: #c99702;}     .container0 .item, .container1 .item{padding: 0 12px;}       .container{display:flex;}     .container1{flex-direction: row-reverse;}     .container2{flex-direction: column;}     .container3{flex-direction: column-reverse;}     </style> </head> <body> <div class="container container0">         <div class="item">1</div>         <div class="item">2</div>         <div class="item">3</div> </div> <div class="container container1">         <div class="item">1</div>         <div class="item">2</div>         <div class="item">3</div> </div> <div class="container container2">         <div class="item">1</div>         <div class="item">2</div>         <div class="item">3</div> </div> <div class="container container3">         <div class="item">1</div>         <div class="item">2</div>         <div class="item">3</div> </div> </body> </html>

Flex 弹性布局(****************************************************)_取值_06

Flex 弹性布局(****************************************************)_ide_08



flex-wrap

flex-wrap取值

描述

nowrap

不换行(默认值)

wrap

换行

wrap-reverse



wrap

Flex 弹性布局(****************************************************)_css_09


举个栗子:

Flex 弹性布局(****************************************************)_取值_06

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>flex-direction</title>     <style type="text/css">     .container{width: 400px;margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}     .item{margin: 10px;width: 100px;line-height: 40px;text-align: center;background-color: #c99702;}      .container{display: flex;}     .container1{flex-wrap: wrap;}     .container2{flex-wrap: wrap-reverse;}     </style> </head> <body>  <div class="container container0">         <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>  <div class="container container1">         <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>  <div class="container container2">         <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>  </body> </html>

Flex 弹性布局(****************************************************)_取值_06

Flex 弹性布局(****************************************************)_ide_12

 ​

语法:

flex-flow:<' flex-direction​ '> || <' flex-wrap '>

默认值:看各分拆属性

适用于:flex容器

继承性:无

动画性:否

计算值:指定值


取值:

<' flex-direction '>:定义弹性盒子元素的排列方向。

<' flex-wrap '>:控制flex容器是单行或者多行。


说明:

复合属性。设置或检索弹性盒模型对象的子元素排列方式。


推荐使用 flex-flow ,而不是单独用flex-direction 或 flew-wrap

Flex 弹性布局(****************************************************)_默认值_13​初始值 row nowrap



Flex 弹性布局(****************************************************)_html_14​​Flex 弹性布局(****************************************************)_默认值_15



order

order 是一个『相对值』 ,是排在主轴上的顺序

order 值越大,排名越靠后。

order取值

描述

order

整数

initial

初始值 0

Flex 弹性布局(****************************************************)_html_16


举个栗子:

Flex 弹性布局(****************************************************)_取值_06

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>order</title>     <style type="text/css">     .container{         display: flex;         background-color: #963297;         width: 300px;         padding:3px;     }      .item{         color: #fff;         width: 50px;         line-height: 30px;         background-color: #d29201;         margin: 4px;         text-align: center;     }     .item1{order: 10;}     .item2{order: 2;}     .item3{order: 3;}      </style> </head> <body> <div class="container">         <div class="item item1">1</div>         <div class="item item2">2</div>         <div class="item item3">3</div> </div> </body> </html>

Flex 弹性布局(****************************************************)_取值_06

Flex 弹性布局(****************************************************)_默认值_19



弹性

flex弹性相关的属性


  • flex-grow
  • flex-shrink
  • flex-basis

 ​

设置『flex item』的 『初始宽度、 高度』

横向排列时,设置的是宽

纵向排列时,设置的是高


语法:


flex-basis:<length>​ | <percentage> | auto | content

默认值:auto

适用于:flex子项

继承性:无

动画性:是,当值为非关键字时

计算值:指定值



取值:




<length>

​: 用长度值来定义宽度。不允许负值​

<percentage>

​:用百分比来定义宽度。不允许负值auto: 无特定宽度值,取决于其它属性值content: 基于内容自动计算宽度

说明:


设置或检索弹性盒伸缩基准值。



  • 如果所有子元素的基准值之和大于剩余空间,则会根据每项设置的基准值,按比率伸缩剩余空间
  • 对应的脚本特性为flexBasis


flex-grow

设置元素所能分配到的空余空间的比例。

语法:


flex-grow:<number>

默认值:0

适用于:flex子项

继承性:无

动画性:是

计算值:指定值



取值:


<number>:用数值来定义扩展比率。不允许负值


说明:


  • 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。

flex-basis + flow-grow / sum(flow-grow) * remain


flex-shrink

把负的剩余空间平摊

语法:


flex-shrink:<number>
默认值:1
适用于:flex子项
继承性:无
动画性:是
计算值:指定值



取值:


<number>:用数值来定义收缩比率。不允许负值



说明:


设置或检索弹性盒的收缩比率。
根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。


flex-basis + flow-shrink / sum(flow-shrink) * remain


flex(推荐使用)

语法


flex:none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
默认值:看各分拆属性
适用于:flex子项
继承性:无
动画性:否
计算值:看各分拆属性



取值


none:none关键字的计算值为: 0 0 auto
<' flex-grow '>:用来指定扩展比率,即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。
在「flex」属性中该值如果被省略则默认为「1」
<' flex-shrink '>:用来指定收缩比率,即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。
在收缩的时候收缩比率会以伸缩基准值加权
在「flex」属性中该值如果被省略则默认为「1」
<' flex-basis '>:用来指定伸缩基准值,即在根据伸缩比率计算出剩余空间的分布之前,「flex子项」长度的起始数值。
在「flex」属性中该值如果被省略则默认为「0%」
在「flex」属性中该值如果被指定为「auto」,则伸缩基准值的计算值是自身的 <' width '> 设置,如果自身的宽度没有定义,则长度取决于内容。


说明


复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
如果缩写「flex: 1」, 则其计算值为「1 1 0%」
如果缩写「flex: auto」, 则其计算值为「1 1 auto」
如果「flex: none」, 则其计算值为「0 0 auto」
如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」,即「flex」初始值


举个栗子:

Flex 弹性布局(****************************************************)_取值_06

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>flex</title>     <style type="text/css">     .container{         background-color: #963297;     }      .item{margin: 10px;line-height: 40px;text-align: center;color: #fff;font-size: 20px;background-color: #c99702;font-size: 50px;}     .container{display: flex;flex-flow: column;}/* 弹性布局,且纵向排列 */     html,body,.container{height: 100%;}     .item{flex: 1 1 0;}/* flex-grow:1;  flex-shrink:1; flex-basis:0; */     .item3{flex: 2;}/* flex-grow:2; */     </style> </head> <body> <div class="container">         <div class="item item1">1</div>         <div class="item item2">2</div>         <div class="item item3">3</div> </div> </body> </html>

Flex 弹性布局(****************************************************)_取值_06

Flex 弹性布局(****************************************************)_html_22



对齐

和『对齐』相关的属性有:


  • justify-content
  • align-items
  • align-self
  • align-content



justify-content

justify-content: flex-start | flex-end | center | space-between | space-around

默认值:flex-start

设置 main-axis 方向上对齐方式

justify-content 和 text-align是类似的,比text-align 更丰富一些。


举个栗子:

Flex 弹性布局(****************************************************)_取值_06

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>justify-content</title>     <style type="text/css">     .container{margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}      .item{margin: 10px;width: 100px;line-height: 40px;text-align: center;background-color: #c99702;}      .container{display: flex; }     .fs{justify-content: flex-start;}     .fe{justify-content: flex-end;}     .c{justify-content: center;}     .sb{justify-content: space-between;}     .sa{justify-content: space-around;}       /*.container{flex-flow: column; width: 120px;height: 300px;}*/     </style> </head> <body>  <div class="container fs">         <div class="item item1">1</div>         <div class="item item2">2</div>         <div class="item item3">3</div> </div>  <div class="container fe">         <div class="item item1">1</div>         <div class="item item2">2</div>         <div class="item item3">3</div> </div>  <div class="container c">         <div class="item item1">1</div>         <div class="item item2">2</div>         <div class="item item3">3</div> </div>  <div class="container sb">         <div class="item item1">1</div>         <div class="item item2">2</div>         <div class="item item3">3</div> </div>  <div class="container sa">         <div class="item item1">1</div>         <div class="item item2">2</div>         <div class="item item3">3</div> </div>  <div class="container fs">         <div class="item item1">1</div>         <div class="item item2">2</div>         <div class="item item3">3</div> </div>  </body> </html>

Flex 弹性布局(****************************************************)_取值_06

Flex 弹性布局(****************************************************)_css_25





​align-items​

设置『辅轴方向上』的对齐方式

语法:


align-items:flex-start | flex-end | center | baseline | stretch
默认值:stretch
适用于:flex容器
继承性:无
动画性:是
计算值:指定值



取值:


flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。



说明:


定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
对应的脚本特性为alignItems。




举个栗子:

Flex 弹性布局(****************************************************)_取值_06

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>align-items</title>     <style type="text/css">     .container{margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}     .item{margin: 10px;width: 100px;line-height: 40px;text-align: center;background-color: #c99702;}       .container{display: flex;}     .item1{line-height: 100px;}     .item2{line-height: 70px;}     .fs{align-items: flex-start;}     .fe{align-items: flex-end;}     .c{align-items: center;}     .s{align-items: stretch;}     .b{align-items: baseline;}      </style> </head> <body>     <div class="container fs">         <div class="item item1">1</div>         <div class="item item2">2</div>         <div class="item item3">3</div>     </div>     <div class="container fe">         <div class="item item1">1</div>         <div class="item item2">2</div>         <div class="item item3">3</div>     </div>     <div class="container c">         <div class="item item1">1</div>         <div class="item item2">2</div>         <div class="item item3">3</div>     </div>     <div class="container s">         <div class="item item1">1</div>         <div class="item item2">2</div>         <div class="item item3">3</div>     </div>     <div class="container b">         <div class="item item1">1</div>         <div class="item item2">2</div>         <div class="item item3">3</div>     </div>      </body> </html>

Flex 弹性布局(****************************************************)_取值_06

Flex 弹性布局(****************************************************)_ide_28


我看不懂,最后的 baseline。 觉得应该和 flex-start相同。而实际和center相同。 求解释




align-self

align-self:auto | flex-start | flex-end | center | baseline | stretch

设置『单个 flex item 』在cross-axis 方向上的对齐方式


举个栗子:

Flex 弹性布局(****************************************************)_取值_06

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>align-self</title>     <style type="text/css">     .container{margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}     .item{margin: 10px;width: 100px;line-height: 40px;text-align: center;background-color: #c99702;}           .container{display: flex;align-items: flex-start;}     .item1{line-height: 100px;}     /*.item2{align-self: flex-end;}*/     /*.item2{align-self: center;}*/     /*.item2{align-self: baseline;}*/     /*.item2{align-self: stretch;}*/     </style> </head> <body>         <div class="container">             <div class="item item1">1</div>             <div class="item item2">2</div>             <div class="item item3">3</div>         </div> </body> </html>

Flex 弹性布局(****************************************************)_取值_06 ​​Flex 弹性布局(****************************************************)_ide_31




flex-start

Flex 弹性布局(****************************************************)_html_32​flex-end

Flex 弹性布局(****************************************************)_css_33​center

Flex 弹性布局(****************************************************)_html_34​baseline

Flex 弹性布局(****************************************************)_html_35​stretch




align-content

align-content:flex-start | flex-end | center | space-between | space-around | stretch

设置 cross-axis 辅轴方向上行对齐方式

flex换行了,多行之间的对齐方式

默认值: stretch 拉伸


举个栗子:

Flex 弹性布局(****************************************************)_取值_06

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>align-content</title>     <style type="text/css">     .container{margin: 20px;width: 800px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}     .item{margin: 10px;width: 200px;line-height: 40px;text-align: center;background-color: #c99702;}      .container{display: flex;}     .container{height: 800px;flex-flow: row wrap; align-items: flex-start;}      /*.container{align-content: flex-start;}*/     /*.container{align-content: flex-end;}*/     /*.container{align-content: center;}*/     /*.container{align-content: space-between;}*/     /*.container{align-content: stretch;}*/      </style> </head> <body> <div class="container">         <div class="item item1">1</div>         <div class="item item2">2</div>         <div class="item item3">3</div>         <div class="item item4">4</div>         <div class="item item5">5</div>         <div class="item item6">6</div>         <div class="item item7">7</div>         <div class="item item8">8</div>         <div class="item item9">9</div>         <div class="item item10">10</div> </div> </body> </html>

Flex 弹性布局(****************************************************)_取值_06

Flex 弹性布局(****************************************************)_html_38




布局--三行两列自适应布局

核心代码

Flex 弹性布局(****************************************************)_取值_06

<div class="head">head</div> <div class="body">         <div class="side">side</div>         <div class="main">main</div> </div> <div class="foot">foot</div>

Flex 弹性布局(****************************************************)_取值_06



body{display: flex;flex-flow: column;} .head,.foot{height: 100px;} .body{flex-flow: 1; display: flex;} .side{width: 200px;} .main{flex: 1;}



举个栗子:

Flex 弹性布局(****************************************************)_取值_06

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>三行两列自适应布局</title>     <style type="text/css">     html,body{margin: 0;text-align: center;}     .head, .foot{line-height: 100px;background-color: #000;color: #fff;}     .side{background-color: yellow;}     .main{background-color: pink;}       html,body{height: 100%;}     body{display: flex;flex-flow: column;}     .head,.foot{height: 100px;}     .body{flex: 1;display: flex;}     .side{width: 200px;}     .main{flex: 1;}      .main{margin-left: 10px;}     /*.body{width: 960px;align-self: center;}*/     </style> </head> <body> <div class="head">head</div> <div class="body">             <div class="side">side</div>         <div class="main">main</div> </div> <div class="foot">foot</div> </body> </html>

Flex 弹性布局(****************************************************)_取值_06


Flex 弹性布局(****************************************************)_取值_43