Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS弹性布局（flex）快速入门和实操
Blogger Information
Blog 145
fans 7
comment 7
visits 164525
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
CSS弹性布局（flex）快速入门和实操
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
1092 people have browsed it

CSS弹性布局基础知识：

Flex容器属性：

1、 flex-direction:row/colum:主轴方向，默认主轴为行，
2、 flex-wrap:nowrap/wrap;默认不换行
3、 flex-flow:简写direction和wrap;
4、 justify-content:flex-start/center/flex-end和space-between/space-evenly/space-around;
主轴上项目对其方式和排列方式
5、 align-items:flex-start/center/flex-end；项目在交叉轴上的对其方式
6、 align-content: space-between/space-evenly/space-around: 项目在交叉轴上多行时的排列方式

Flex项目属性：

1、 order:为项目编号（int）,值越小越靠前排列
2、 flex-grow/shrink/basis: grow/shrink的值为比例分配：0~1； basis:项目占据的主轴空间。简写：flex:0,0 auto;
3、 aglin-self:某个特定项目的对齐方式；值为：flex-start、center、flex-end;

实战练习：

1、flex个属性练习：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>flex布局小案例</title>
  8.     <style>
  9.         .box{
  10.             /* width: 40em; */
  11.             /* height: 15em; */
  12.             background-color: lightgray;
  13.             display: flex;
  14.             /* 存在剩空间可以通过space-between|space-evenly|space-around 来分配剩余空间*/
  15.             /* justify-content: space-between;
  16.             justify-content: space-around;
  17.             justify-content: space-evenly; */
  18.             flex-flow:row nowrap;
  19.             align-items:flex-end;
  20.             /* 存在多行时，副轴存在剩余空间时，通过space-between|space-evenly|space-around 来分配剩余空间 */
  21.             align-content: space-around;
  22.         }
  23.         .box .item{
  24.             width:200px;
  25.             height:30px;
  26.             flex-grow: 1;
  27.             flex-shrink:0;
  28.         /* 设置元素自动伸缩简写：grow shrink basis */
  29.             flex:1;/*等同于1,1,auto*/
  30.             flex:none;/*等同于0 0 auto*/
  31.             flex:initial;/*等同于 0 1 auto*/
  34.         }
  35.         .box .item:nth-of-type(2n+1){
  36.             background-color: lightseagreen;
  37.         }
  38.         .box .item:nth-of-type(2n){
  39.             background-color: lightskyblue;
  40.         }
  42.         .box .item:nth-child(1){
  43.             order:4;
  44.         }
  45.         .box .item:nth-child(3){
  46.             order:5;
  47.             /* 设置第三个为基本宽度为 300px */
  48.             flex-basis:300px;
  49.         }
  50.     </style>
  51. </head>
  52. <body>
  53.     <div class="box">
  54.         <div class="item">01</div>
  55.         <div class="item">02</div>
  56.         <div class="item">03</div>
  57.         <div class="item">04</div>
  59.     </div>
  60. </body>
  61. </html>

2、效果图：

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