Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html:Flex布局：容器属性和项目属性（4月9日）
Blogger Information
Blog 10
fans 0
comment 0
visits 9155
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
html:Flex布局：容器属性和项目属性（4月9日）
ALWAYS
Original
1066 people have browsed it

笔记

一、 flex 容器上的6个属性

  • 1.display属性：Flex布局一定要有主轴，主轴水平排列，所有项目必须沿着主轴排列。display:flex;块级容器 。display:inline-flex 行内容器。
  • 2.布局方向属性：Flex-direction:水平方向 row（1,2,3,4）row-reverse(4,3,2,1).垂直方向 column，column-reverse;
    1. 项目换行属性：属性flex-wrap:默认值不换行（nowrap），默认不换行显示，如果当然容器容纳不下，项目会自动收缩。如果允许换行，当然行容纳不下的项目，会折行显示，此时创建的容器叫做多行容器。

  • 4.☆主轴方向和是否换行的简写：属性flex-flow:

    1. /*Flex-direction:row;
    2. flex-wrap:nowrap*/
    3. /*以下是简写*/
    4. flex-flow: row nowrap;
  • 5.☆flex 容器主轴对齐:justify-content:flex-start（主轴起点）/flex-end/center;

  • justify-content:space-between(两端对齐)/space-around(分散对齐：每个项目周围的空间相同，并且不叠加)/space-even(平均分配，并且叠加；)

  • 说明：默认所有项目与主轴起始线对齐，当前容器中在主轴方向上存在剩余空间的时候，项目对齐采用意义。

  • 6.☆ 交叉轴 对齐方式：只使用与单行容器，禁止换行才能生效，并且交叉轴方向有空间才有意义。align-item:flex-start/flex-enf/center

  • 7.多行容器交叉轴对齐方式align-content:stretch(拉伸)/flex-start/flex-end/center/space-between(两端对齐)/space-around(分散对齐）/space-even(平均分配）

二、flex项目上的6个属性

  • 1 .☆项目排列顺序：order：4/3/2/1

  • 2 .☆项目独立对齐方式：aligh-self:auto/stretch/(继承父级容器height：inherit/flex-start/flex-end/)会覆盖到aligh-items.

  • 3 .☆项目放大因子:flex-grow:initial(默认值不放大，0也可以)/1允许放大。（计算公式：主轴的剩余空间 300-503;放大因子是1，一共三个项目，因子之和是3.所以是150/3=50 每个项目分到50，在每个项目的基础上增加50，得到新的宽度。可以调整每个项目单独的项目因子来调整项目的宽度增加值：例如：第一个项目（因子1），第二个项目（因子2），第三个项目（因子3）每个项目分得的宽度为 第一个项目（150/61=25）,第二个项目（150/62=50）,第三个项目（150/63=75））

  • 4 . ☆ 项目收缩因子：（空间不足的时候，将不够的空间在项目间删除）flex-shrink:(0禁止收缩，initial原始大小)第一个项目 flex-shrink:1,第二个项目 flex-shrink:2,第三个项目 flex-shrink：3；因子大，删的多，因子小，删的少。先考虑，当前项目超出主轴空间多少。超出部分与收缩因子进行计算。计算后，用项目尺寸减掉计算结果。

  • 5 . 项目大小：flex-basis 如何计算项目在主轴中的大小（宽度）。auto=width,但是可以手工改变宽度（支持固定值70px，支持百分比 20%）

  • 6 . ☆☆☆☆ flex 简写（三个值、两个值、一个值）：默认（不放大0，允许收缩1，以项目的width为准auto），两个值：忽略收缩因子（flex：0 auto），单值flex:auto,相当于因子都是1.flex:none(禁止缩放)；flex：1 ，允许缩放。

三、案例

  • 1.flex-direction
    1. <html lang="en">
    2. <head>
    3.   <meta charset="UTF-8" />
    4.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    5.   <title>flex属性练习</title>
    6.   <style>
    7.     .container {
    8.       width: 300px;
    9.       height: 150px;
    10.       display: flex;
    11.       /* display: inline-flex; */
    12.       flex-direction: row-reverse;
    13.       /* flex-direction: column-reverse; */
    14.     }
    15.     .item {
    16.       width: 100px;
    17.       height: 100px;
    18.       background-color: lightblue;
    19.     }
    20.   </style>
    21. </head>
    22. <body>
    23.   <div class="container">
    24.     <div class="item">1</div>
    25.     <div class="item">2</div>
    26.     <div class="item">3</div>
    27.     <div class="item">4</div>
    28.   </div>
    29. </body>
    30. </html>

  • 2.flex-warp

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>flex属性练习</title>
    7.   <style>
    8.     .container {
    9.       width: 400px;
    10.       height: 450px;
    11.       display: flex;
    12.       /* display: inline-flex; */
    13.       /* flex-direction: row-reverse; */
    14.       /* flex-direction: column-reverse; */
    15.       flex-wrap: wrap-reverse;
    16.     }
    17.     .item {
    18.       width: 100px;
    19.       height: 100px;
    20.       background-color: lightblue;
    21.     }
    22.   </style>
    23. </head>
    24. <body>
    25.   <div class="container">
    26.     <div class="item">1</div>
    27.     <div class="item">2</div>
    28.     <div class="item">3</div>
    29.     <div class="item">4</div>
    31.     <div class="item">5</div>
    32.     <div class="item">6</div>
    33.     <div class="item">7</div>
    34.     <div class="item">8</div>
    35.   </div>
    36. </body>
    37. </html>
  • 3.flex-flow
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>flex属性练习</title>
    7.   <style>
    8.     .container {
    9.       width: 300px;
    10.       height: 350px;
    11.       display: flex;
    12.       flex-flow: column wrap;
    13.     }
    14.     .item {
    15.       width: 100px;
    16.       height: 100px;
    17.       background-color: lightblue;
    18.     }
    19.   </style>
    20. </head>
    21. <body>
    22.   <div class="container">
    23.     <div class="item">1</div>
    24.     <div class="item">2</div>
    25.     <div class="item">3</div>
    26.     <div class="item">4</div>
    27.   </div>
    28. </body>
    29. </html>

  • 4.justify-content :设置主轴对齐方式

    2. <head>
    3.   <style>
    4.     .container {
    5.       width: 800px;
    6.       height: 350px;
    7.       display: flex;
    8.       /* 两端对齐 */
    9.       justify-content: space-between;
    10.       /* 分散对齐 ，每个项目两边空间相等*/
    11.       justify-content: space-around;
    12.       /* 平均分配 */
    13.       justify-content: space-evenly;
    14.     }
    16.   </style>
    17. </head>

    5 .aligh-items:交叉只适用单行容器，禁止换行才能生效。

  1.      .container {
  2.         width: 300px;
  3.         height: 150px;
  4.         display: flex;
  5.         flex-flow: row nowrap;
  6.         align-items: center;
  7.       }
  • 6.align-content 多行容器交叉轴的排列顺序
  1.     <style>
  2.       .container {
  3.         width: 300px;
  4.         height: 350px;
  5.         display: flex;
  6.         flex-flow: row wrap;
  7.         align-content: space-evenly;
  8.       }
  10.       .item {
  11.         width: 100px;
  12.         height: 100px;
  13.         background-color: lightblue;
  14.       }
  15.     </style>

  • 7 . order 用法

    1. <style>
    2.     /* 容器 */
    3.     .container {
    4.       width: 300px;
    5.       height: 150px;
    6.     }
    7.     /* 将容器/父元素设置为flex容器 */
    8.     .container {
    9.       display: flex;
    10.     }
    12.     /* 项目/子元素 */
    13.     .item {
    14.       width: 50px;
    15.       height: 50px;
    16.       background-color: cyan;
    17.       font-size: 1.5rem;
    19.       order: 0;
    20.     }
    21.     .item:first-of-type {
    22.       order: 4;
    23.       background-color: lightgreen;
    24.     }
    25.     .item:nth-of-type(2) {
    26.       background-color: lightcoral;
    27.       order: 3;
    28.     }
    29.     .item:nth-of-type(3) {
    30.       background-color: wheat;
    31.       order: 1;
    32.     }
    34.     .item:last-of-type {
    35.       order: -1;
    36.     }
    37.   </style>

  • 8 .align-self 单独项目在交叉轴上的对齐方式

    1. <style>
    2.     .container {
    3.       width: 300px;
    4.       height: 350px;
    5.       display: flex;
    6.     }
    8.     .item {
    9.       width: 100px;
    10.       height: 100px;
    11.       background-color: lightblue;
    12.     }
    13.     .item:first-of-type {
    14.       height: inherit;
    15.       background-color: red;
    16.       order: 4;
    17.       align-self: stretch;
    18.     }
    19.     .item:last-of-type {
    20.       background-color: yellow;
    21.       order: 1;
    22.       align-self: flex-end;
    23.     }
    24.     .item:nth-of-type(2) {
    25.       background-color: tomato;
    26.       order: 3;
    27.       align-self: flex-start;
    28.     }
    29.     .item:nth-of-type(3) {
    30.       background-color: wheat;
    31.       order: 2;
    32.       align-self: center;
    33.     }
    34.   </style>

  • 9 .flex-grow

    1. <style>
    2.     .container {
    3.       width: 300px;
    4.       height: 350px;
    5.       display: flex;
    6.     }
    8.     .item {
    9.       width: 50px;
    10.       height: 100px;
    11.       background-color: lightblue;
    12.     }
    13.     .item:first-of-type {
    14.       flex-grow: 1;
    15.       background-color: #cdcdcd;
    16.     }
    18.     .item:last-of-type {
    19.       flex-grow: 3;
    20.       background-color: lightgreen;
    21.     }
    22.     .item:nth-of-type(2) {
    23.       flex-grow: 2;
    24.       background-color: pink;
    25.     }
    26.   </style>

  • 10 . flex-shrink

    1. <style>
    2.     .container {
    3.       width: 200px;
    4.       height: 350px;
    5.       display: flex;
    6.     }
    8.     .item {
    9.       width: 100px;
    10.       height: 100px;
    11.       background-color: lightblue;
    12.     }
    13.     .item:first-of-type {
    14.       flex-shrink: 1;
    15.       background-color: #cdcdcd;
    16.     }
    18.     .item:last-of-type {
    19.       flex-shrink: 3;
    20.       background-color: lightgreen;
    21.     }
    22.     .item:nth-of-type(2) {
    23.       flex-shrink: 2;
    24.       background-color: pink;
    25.     }
    26.   </style>
  • 11 . flex-basis 项目的计算尺寸
    1.   .item {
    2.       width: 100px;
    3.       height: 100px;
    4.       background-color: lightblue;
    5.       flex-basis: 100px;
    6.       max-width: 50px;
    7.     }
  • 12 .flex 简写 ：放大因子，缩小因子，项目大小。
    1.     .item {
    2.       width: 100px;
    3.       height: 100px;
    4.       background-color: lightblue;
    5.       flex: 0 1 60px;
    6.     }

总结

  • 1 . 弹性布局解决的问题是：解决块元素的垂直居中问题，第二个是容器中的项目自动伸缩，以适应容器变化，非常适合移动端布局（响应式布局）。是现在布局中最简单的一种布局方法。
  • 2 . flex 项目特征：容器主轴是水平方向，项目排列沿着主轴起始线排列，并且自动转换行内块元素，项目主轴空间不足时，自动压缩项目大小，并且不会换行。容器主轴存在未分配空间时，项目保持自身大小，不会放大。
  • 3 .布局只针对子元素，对孙元素无效。flex适用除table外的大部分标签。
  • 4 .使用nowrap时，项目不换行，但是会压缩项目宽度。使用wrap时，项目保持原有大小,当前行容纳不下时，会折行，此时容器变成多行容器。
  • 5 .flex-flow 合并flex-direction 和flex-wrap属性，以后使用这个属性。
  • 6 .justify-content:主轴对齐方式，主轴方向有剩余空间才有意义。space-between 是两端对齐，起始线两个项目紧紧挨着容器。space-around 是分散对齐，项目两端宽度相同。
    1. aligh-items:只适用单行容器，禁止换行才能生效。
      aligh-content:交叉轴上有多个相目才有效。
  • 8 . flex-basis:项目的计算尺寸，auto=width
    优先级如下：min-width/max-width>flex-basis>width.
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