search

博客列表 >html:Flex布局：容器属性和项目属性（4月9日）

html:Flex布局：容器属性和项目属性（4月9日）

ALWAYS
ALWAYS原创
2020年04月11日 16:01:191065浏览

笔记

一、 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.
上一条：thinkphp5.6源码阅读1下一条：仿php中文网移动端布局实战
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多