Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex常用的6个属性
Blogger Information
Blog 47
fans 0
comment 0
visits 21059
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常用的6个属性
P粉036614676
Original
681 people have browsed it

1.flex容器属性

各属性区别：<!-- justify-content:横轴和竖轴布局（包括单个和多个） align-items:竖轴单个布局（或者多个元素是一个整体），align-contains:竖轴多个布局 align-self:可以抵消align-items的属性 -->

这里看不懂没关系，你先看下面的，然后再看这个总结

1.1flex-direction

排列属性：
改变各元素的排列方向，有四个属性如下：
row | row-reverse | column | column-reverse
同学们可以在23行代码修改属性值，观察各属性值的变化

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.         *{
  10.           padding: 0;
  11.           margin: 0;
  12.           box-sizing: border-box;
  13.         }
  14.         .contain{
  15.           flex-direction: column;
  16.           height: 16rem;
  17.           background-color: antiquewhite;
  18.           border: 1px solid red;
  19.           display: flex;
  20.         }
  21.         .contain>.item{
  22.           background-color:aqua;
  23.           color: red;
  24.           border: solid royalblue;
  25.           width: 10em;
  26.           /* align-self: flex-end; */
  27.         }
  28.   </style>
  29. </head>
  30. <body>
  31.    <div class="contain">
  32.     <div class="item">item1</div>
  33.     <div class="item">item2</div>
  34.     <div class="item">item3</div>
  35.    </div>
  36. </body>
  37. </html>

要点如下：
当你使用flex-direction: column;的时候，align-contain就不管用了，因为这时候你的横轴和竖轴交换了位置

1.2justify-content

排列属性：

start,center,end,space-between,space-evenly,space-around

space-between：flex items 之间的距离相等，与main start、main end两端对齐
space-evenly: flex items 之间的距离相等,flex items与main start 、main end 之间的距离等于flex items之间的距离
space-around :flex items 之间的距离相等,flex items与main start 、main end 之间的距离等于flex items之间的距离的一半

同学可以在74行更换属性值，看个属性值的作业是什么

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.         *{
  10.           padding: 0;
  11.           margin: 0;
  12.           box-sizing: border-box;
  13.         }
  14.         .contain{
  15.           justify-content: center;
  16.           height: 16rem;
  17.           background-color: antiquewhite;
  18.           border: 1px solid red;
  19.           display: flex;
  20.         }
  21.         .contain>.item{
  22.           background-color:aqua;
  23.           color: red;
  24.           border: solid royalblue;
  25.           width: 10em;
  26.           /* align-self: flex-end; */
  27.         }
  28.   </style>
  29. </head>
  30. <body>
  31.    <div class="contain">
  32.     <div class="item">item1</div>
  33.     <div class="item">item2</div>
  34.     <div class="item">item3</div>
  35.    </div>
  36. </body>
  37. </html>

1.3align-items

排列属性：

normal,flex-start,flex-end,center,baseline
注意：align-items:竖轴单个布局，就是竖轴上只能有一个元素（或者多个元素是一个整体）
同学可以更改124排的属性，来看每个属性的变化

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.         *{
  10.           padding: 0;
  11.           margin: 0;
  12.           box-sizing: border-box;
  13.         }
  14.         .contain{
  15.           flex-direction: column;
  16.           align-items: flex-end;
  17.           background-color: antiquewhite;
  18.           border: 1px solid red;
  19.           display: flex;
  20.         }
  21.         .contain .item{
  22.           background-color:aqua;
  23.           color: red;
  24.           border: solid royalblue;
  25.         }
  26.   </style>
  27. </head>
  28. <body>
  29.    <div class="contain">
  30.     <div class="item">item1</div>
  31.     <div class="item">item2</div>
  32.     <div class="item">item3</div>
  33.    </div>
  34. </body>
  35. </html>

align-content(几乎不用)

排列属性：
stretch,flex-start,flex-end,center,space-between,space-evenly,space-around
html

flex-wrap

排列属性：
wrap和nowrap

Correcting teacher：PHPzPHPz

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