前端工程师、前端爱好者
学习交流平台

弹性盒模型

一、属性介绍

1.1、justify-content

  • flex-start:默认值,伸缩项目向一行的起始位置靠齐;
  • flex-end:伸缩项目向一行的结束位置靠齐;
  • center:项伸缩项目向一行的中间位置靠齐;
  • space-between:伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置,最后一个伸缩项目在一行中最终点位置;
  • space-around:伸缩项目会平均地分布在行里,两端保留一半的空间;
  • initial:设置该属性为它的默认值;
  • inherit:从父元素继承该属性。

1.2、align-items

  • stretch:默认值,项目被拉伸以适应容器;
  • center:项目位于容器的中心;
  • flex-start:项目位于容器的开头;
  • flex-end:项目位于容器的结尾;
  • baseline:项目位于容器的基线上;
  • initial:设置该属性为它的默认值;
  • inherit:从父元素继承该属性。

1.3、flex-direction

CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的,定义了主轴的方向(正方向或反方向)。

/* The direction text is laid out in a line */
flex-direction: row;

/* Like <row>, but reversed */
flex-direction: row-reverse;

/* The direction in which lines of text are stacked */
flex-direction: column;

/* Like <column>, but reversed */
flex-direction: column-reverse;

/* Global values */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;

请注意,值 row 和 row-reverse 受 flex 容器的方向性的影响。 如果它的 dir 属性是 ltr,row 表示从左到右定向的水平轴,而 row-reverse 表示从右到左; 如果 dir 属性是 rtl,row 表示从右到左定向的轴,而 row-reverse 表示从左到右。

1.4、flex-wrap

flex-wrap 指定 flex 元素单行显示还是多行显示 。如果允许换行,这个属性允许你控制行的堆叠方向。

flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: revert;
flex-wrap: unset;

1.5、flex

Value: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

Initial: 0 1 auto

Applies to: flex items

二、实现水平垂直居中效果

对父元素添加下面的样式即可。

.container {
  // 创建flex容器
  display: flex;
  // 竖直垂直居中
  align-items: center;
  // 水平居中
  justify-content: center;
}

三、实现竖向九宫格

要求:使用flexbox布局将9个格子排列成3*3的九宫格,且第一列排完才排第二列。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Flexbox竖向九宫格</title>
    <style>
      html {
        font-family: sans-serif;
      }
      body {
        margin: 0;
      }
      .boxs-wrapper {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 320px;
        width: 320px;
        margin: 0 auto;
      }
      .box {
        background: aqua;
        height: 100px;
        width: 100px;
        text-align: center;
        line-height: 100px;
        margin: 0 10px 10px 0;
      }
      .box:nth-of-type(3n) {
        margin-bottom: 0;
      }
      .box:nth-of-type(n+7) {
        margin-right: 0;
      }
    </style>
  </head>
  <body>
    <section class="boxs-wrapper">
      <article class="box">1</article>
      <article class="box">2</article>
      <article class="box">3</article>
      <article class="box">4</article>
      <article class="box">5</article>
      <article class="box">6</article>
      <article class="box">7</article>
      <article class="box">8</article>
      <article class="box">9</article>
    </section>
  </body>
</html>

参考资料

版权声明:非商业用途转载请注明文章链接,商业用途转载请联系邮箱获取授权。
文章名称:《弹性盒模型》
文章链接:https://www.verytopics.com/flex-box.html
商业联系:yakima.public@gmail.com
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

说明:部分文章或者图片中有https://www.orzzone.com的链接地址,那个也是本人的博客,部分文章是从那搬过来的(那里有很多和前端无关的东西,特意拆出来的)。