首页 > 其他分享> 文章详细

716 css flex布局：flex-flow，flex-direction，flex-wrap，justify-content，align-items，align-content，flex，ord

2021-08-18 12:35:23 阅读：147 来源： 互联网

标签：flex color items align content wrap

认识flex布局

flex布局模型

flex相关的属性

Flex-direction

Justify-content

align-items

flex-wrap、flex-flow

align-content

order

align-self

flex-grow

flex-shrink

flex-basis

flex

09_flex布局的使用01.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      .box {
        width: 550px;
        height: 400px;
        background-color: pink;
        margin: 0 auto;

        /* 
          1.开启flex布局:
            flex: 块级元素
            inline-flex: 行内元素
        */
        display: flex;

        /* 2.flex-direction: 决定主轴的方向 */
        /* row: 主轴从左到右 */
        /* row-reverse: 主轴从右到左 */
        /* column: 主轴从上到下 */
        /* column-reverse: 主轴从下到上 */
        /* flex-direction: column-reverse; */

        /* 3.justify-content: 决定flex items主轴的对齐方式 */
        /* justify-content: space-around; */

        /* 4.align-items: 绝定flex items在交叉轴的对齐方式 */
        /* align-items: baseline; */

        /* 5.结论: 默认情况下, 所有的flex items都会在同一行显示 */
        /* flex-wrap: nowrap */
        /* nowrap: 不换行 */
        /* flex-wrap: wrap-reverse; */

        /* 6.flex-flow: 缩写属性 -> flex-direction || flex-wrap */
        flex-flow: row wrap;
        justify-content: space-evenly;

        /* 7.align-content: 决定多行的flex items在交叉轴上的对齐方式 */
        align-content: space-around;
      }

      .item {
        width: 100px;
        height: 100px;
        color: #fff;
        text-align: center;
      }

      .item1 {
        background-color: #f66;
        /* height: 60px; */
        /* font-size: 50px; */
      }

      .item2 {
        background-color: yellowgreen;
        /* height: 150px; */
      }

      .item3 {
        background-color: skyblue;
        /* height: 120px; */
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item item1">item1</div>
      <div class="item item2">item2</div>
      <div class="item item3">item3</div>
      <div class="item item1">item4</div>
      <div class="item item2">item5</div>
      <div class="item item3">item6</div>
      <div class="item item1">item7</div>
      <div class="item item2">item8</div>
      <div class="item item3">item9</div>
    </div>

    <strong>strong元素</strong>
  </body>
</html>

10_flex布局的使用02.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      .box {
        width: 550px;
        height: 400px;
        background-color: orange;
        margin: 0 auto;

        /* 1.开启flex布局*/
        display: flex;

        /* align-items: center; */
        /* flex-wrap: wrap; */
      }

      /* 
         750px - 550px = 200px
         200 / 3 = 66.66666px
         250 - 66 = 
        */

      /* 
        200 / 5 = 40
        
         */

      .item {
        width: 100px;
        height: 100px;
        color: #fff;
        text-align: center;

        /* 1: flex-grow */
        flex: 1;
      }

      .item1 {
        background-color: #f66;
        /* order: 10; */
        /* flex-grow: .2;  */
        /* flex-shrink: .2; */

        /* flex-basis: 200px; */
      }

      .item2 {
        background-color: #0f0;
        /* height: 150px; */
        /* order: 6; */
        /* flex-grow: .2;  */
        /* flex-shrink: .2; */
      }

      .item3 {
        background-color: #00f;
        /* align-self: flex-end; */
        /* order: 100; */
        /* flex-grow: .3; */
        /* flex-shrink: .2; */
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item item1">item1</div>
      <div class="item item2">item2</div>
      <div class="item item3">item3</div>
    </div>

    <strong>strong元素</strong>
  </body>
</html>

标签：flex,color,items,align,content,wrap
来源： https://www.cnblogs.com/jianjie/p/15156221.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9