当前位置：网站首页>弹性布局（一）

弹性布局（一）

2022-07-07 03:22:00 【鹿蹊zz】

目录

一、声明定义

1  声明块级弹性盒子  display:flex

2 声明内联级弹性盒子  display:inline-flex

二、flex-direction：用于控制盒子元素排列的方向。

row-reverse   从右向左排列元素 

 column-reverse   从下到上垂直排列元素

 三、flex-wrap  

 行元素换行  row 、wrap

垂直元素换行  column 、wrap

垂直元素反向换行  column wrap-reverse

 四、flex-flow  

一、声明定义

容器盒子里面包含着容器元素，使用display:flex 或 display:inline-flex 声明为弹性盒子。

1  声明块级弹性盒子  display:flex

   <style>
        * {
            padding: 0;
            margin: 0;
        }

        article {
            height: 150px;
            margin-left: 100px;
            margin-top: 100px;
            outline: solid 5px silver;
            display: flex;
            padding: 20px;
        }

        article div {
            outline: solid 5px orange;
            text-align: center;
            font-size: 28px;
            line-height: 5em;
            width: 300px;
        }
    </style>

<!-- 声明块级弹性盒子 -->
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>

2 声明内联级弹性盒子  display:inline-flex

<style>
  ...
  article {
   	...
    display: inline-flex;
    ...
  }
  ...
</style>

二、flex-direction：用于控制盒子元素排列的方向。

使用在display:flex的父容器里，改变横轴的方向：

值描述
row从左到右水平排列元素（默认值）
row-reverse从右向左排列元素
column从上到下垂直排列元素
column-reverse从下到上垂直排列元素

row-reverse   从右向左排列元素 

<style>
        * {
          padding: 0;
          margin: 0;
        }
        body {
          margin: 100px;
          font-size: 14px;
          color: #555;
        }
        article {
          width: 500px;
          border: solid 5px silver;
          display: flex;
          box-sizing: border-box;
          padding: 10px;
         /* row-reverse   从右向左排列元素 */
          flex-direction: row-reverse;
        }
        article * {
          border: solid 5px orange;
          padding: 10px;
          margin: 10px;
        }
      </style>
...
     <body>
       <article>
          <h4>1</h4>
          <span>2</span>
           <p>3</p>
       </article>
     </body>

 column-reverse   从下到上垂直排列元素

<style>
        * {
          padding: 0;
          margin: 0;
        }
        body {
          margin: 100px;
          font-size: 14px;
          color: #555;
        }
        article {
          width: 500px;
          border: solid 5px silver;
          display: flex;
          box-sizing: border-box;
          padding: 10px;
         /* column-reverse  从下到上垂直排列元素 */
          flex-direction: column-reverse;
        }
        article * {
          border: solid 5px orange;
          padding: 10px;
          margin: 10px;
        }
      </style>
...
     <body>
       <article>
          <h4>1</h4>
          <span>2</span>
           <p>3</p>
       </article>
     </body>

 三、flex-wrap  

     规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

选项说明
nowrap元素不拆行或不拆列（默认值）
wrap容器元素在必要的时候拆行或拆列。
wrap-reverse容器元素在必要的时候拆行或拆列，但是以相反的顺序

 行元素换行  row 、wrap

 <style>
        * {
            padding: 0;
            margin: 0;
            outline: solid 1px silver;
            padding: 10px;
            margin: 10px;
        }

        head {
            display: block;
        }

        body {
            font-size: 14px;
            color: #555;
        }

        article {
            width: 500px;
            height: 250px;
            border: solid 5px silver;
            box-sizing: border-box;
            padding: 10px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        article div {
            border: solid 5px orange;
            padding: 30px 80px;
            margin: 10px;
            text-align: center;
            font-size: 28px;
        }
    </style>
...

<article>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</article>

水平排列反向换行   row 、wrap-reverse

flex-direction: row;
flex-wrap: wrap-reverse;

垂直元素换行  column 、wrap

flex-direction: column;
flex-wrap: wrap;

垂直元素反向换行  column wrap-reverse

flex-direction: column;
flex-wrap: wrap-reverse;

 四、flex-flow  

     是 flex-direction 与 flex-wrap 的组合简写模式。

     下面是从右向左排列，换行向上拆分行。

flex-flow: row-reverse wrap-reverse;
原网站

版权声明
本文为[鹿蹊zz]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_46461853/article/details/125009387

边栏推荐

猜你喜欢

随机推荐