Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Flex 布局的规则及演示
Blogger Information
Blog 37
fans 1
comment 0
visits 32634
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Flex 布局的规则及演示
Jason Pu?
Original
640 people have browsed it

布局的传统解决方案，基于盒子模型，依赖 display + position + float，某些特殊布局很不方便，比如，垂直居中就不容易实现，为了解决这个问题，我们学习了flex弹性盒子

一.Flex 布局是什么？

1.任何元素都可以通过添加display: flex属性,转为弹性盒元素,也叫flex容器
2.容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
3.转为flex元素后,它的内部的”子元素”就支持flex布局了
4.flex容器中的”子元素”称之为: flex项目
5.所有容器中的项目自动变成”行内块级元素”

二.容器的属性：

flex-direction：决定主轴的方向

1：默认值row （水平方向）
2：column （垂直方向）。

flex-wrap：决定换不换行

1：默认值nowrap（不换行）
2：wrap(换行) 。

flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content：定义了项目在主轴上的对齐方式

1.flex-start（默认值）左对齐
2.flex-end右对齐
3.center居中
4.space-between二端对齐
5.space-around分散对齐
6.space-evenly平均对齐。

align-items: 定义项目在交叉轴上如何对齐

1.stretch默认拉伸
2.flex-start交叉轴的起点对齐
3.flex-end：交叉轴的终点对齐
4.center：交叉轴的中点对齐

align-content：性定义了多根轴线的对齐方式。

1.stretch（默认值）：轴线占满整个交叉轴
2.flex-start：与交叉轴的起点对齐
3.flex-end：与交叉轴的终点对齐
4.center：与交叉轴的中点对齐
5.space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
6.space-around：每根轴线两侧的间隔都相等

三.项目的属性：

1：项目属性flex：通常用来设置某一个项目的特征
放大因子：flex-grow，收缩因子： flex-shrink，项目在主轴上的基准宽度flex-basis
默认值flex: 0 1 auto或者flex: initial：不会放大或收缩，允许放大和收缩：flex: 1 1 auto，禁止放大或收缩：flex: 0 0 auto;

2：order：定义单个项目在所有项目中的排列顺序。数值越小，排列越靠前，默认为0。

3:align-self定义单个项目在交叉轴上的对齐方式

以下我们通过实例来进行演示以下我们通过实例来进行演示

1：justify-content主轴对齐：

  1.     <style>
  2.         *{
  3.             padding:0;
  4.             margin:0;
  5.             box-sizing: border-box;
  6.         }
  7.         .demo1{
  8.             margin:1em;
  9.             padding:.5em;
  10.         }
  11.         .demo1>.content{
  13.             width:30em;
  14.             height: 6em;
  15.             background-color:yellow;
  16.             display: flex;
  17.             /* 主轴左对齐： */
  18.             justify-content: flex-start;
  19.             /* 主轴右对齐 */
  20.             justify-content: flex-end;
  21.             /* 主轴居中对齐： */
  22.             justify-content: center;
  23.             /* 主轴二端对齐： */
  24.             justify-content:space-between;
  25.             /* 主轴分散对齐： */
  26.             justify-content:space-around;
  27.             /* 主轴平均对齐： */
  28.             justify-content: space-evenly;
  29.         }
  30.         .demo1>.content>.box{
  31.             height: 2em;
  32.             width: 2em;
  33.             background-color:skyblue;
  34.             border: 1px solid #000;
  35.         }
  37.     </style>
  38. </head>
  39. <body>
  40.     <div class="demo1">
  41.         <div class="content">
  42.             <div class="box">1</div>
  43.             <div class="box">2</div>
  44.             <div class="box">3</div>
  45.             <div class="box">4</div>
  46.             <div class="box">5</div>
  47.         </div>
  48. </div>
  49. </body>
  50. </html>

运行结果：






2.交叉轴对齐方式演示：
代码；

  1.     <style>
  2.         *{
  3.             padding:0;
  4.             margin:0;
  5.             box-sizing: border-box;
  6.         }
  7.         .demo1{
  8.             margin:1em;
  9.             padding:.5em;
  10.         }
  11.         .demo1>.content{
  13.             width:30em;
  14.             height: 6em;
  15.             background-color:yellow;
  16.             display: flex;
  17.             justify-content: space-around;
  18.             /* 默认拉伸 */
  19.             align-items: stretch;
  20.             /* 交叉轴起点对齐： */
  21.             align-items: flex-start;
  22.             /* 交叉轴终点对齐： */
  23.             align-items: flex-end;
  24.             /* 交叉轴居中对齐： */
  25.             align-items: center;
  26.         }
  27.         .demo1>.content>.box{
  28.             /* height: 2em; */
  29.             width: 2em;
  30.             background-color:skyblue;
  31.             border: 1px solid #000;
  32.         }
  33.         /* 使某个项目改变在元素中的顺序 */
  34.         .demo1>.content>.box:nth-of-type(4){
  35.             order: 1;
  36.         }
  38.     </style>
  39. </head>
  40. <body>
  41.     <div class="demo1">
  42.         <div class="content">
  43.             <div class="box">1</div>
  44.             <div class="box">2</div>
  45.             <div class="box">3</div>
  46.             <div class="box">4</div>
  47.             <div class="box">5</div>
  48.         </div>
  49. </div>
  50. </body>

代码运行结果如下：




Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post