Flex项目属性

Flex项目属性

一、Flex父元素属性

1. display

用来定义一个 flex 容器。如果设置为 flex 则容器呈现为块状元素，设置为inline-    flex 则容器呈现为行内元素。

CSS 代码:

    .container {
      display: flex; /* or inline-flex */
    }

2. flex-direction

flex-direction 属性确立了主轴，从而定义了 flex 项在 flex 容器中的排布方向。 Flexbox 是单向布局，有些时候我们也称作一维布局。 可以将 flex 项视为主要沿着水平行或垂直列排布。

CSS 代码:

    .container {
      flex-direction: row | row-reverse | column | column-reverse;
    }

3. flex-wrap

默认情况下，flex 项会尽可能地尝试排在同一行上（行或列），通过设置 flex-wrap 来决定 flex 项是否允需要换行。

CSS 代码:

    .container{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }

nowrap (默认值) : 不换行
wrap: 换行
wrap-reverse: flex 项将 从下到上 根据实际情况排布再多行上折行。

4. flex-flow

这是 flex-direction 和 flex-wrap 属性的缩写形式。同时定义 flex 容器的主轴和交叉轴。默认是 row nowrap

CSS 代码:

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

5. justify-content

justify-content 属性定义了flex 项沿主轴方向的对齐方式。

CSS 代码:

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

    flex-start（默认值）：左对齐
    flex-end：右对齐
    center： 居中
    space-between：两端对齐，项目之间的间隔都相等。
    space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

6. align-items

align-items 定义了 flex 项如何沿当前行在交叉轴上排布的默认行为。可以将其视为交叉轴（垂直于主轴）上的对齐方式。

CSS 代码:

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

    flex-start：交叉轴的起点对齐。
    flex-end：交叉轴的终点对齐。
    center：交叉轴的中点对齐。
    baseline: 项目的第一行文字的基线对齐。
    stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

7.align-content

当交叉轴上有剩余空间时，align-content 可以设置 flex 容器中的 行 在交叉轴上如何分配剩余空间，类似于 justify-content 在主轴上对齐单个 flex 项的方式。

CSS 代码:

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

    flex-start：与交叉轴的起点对齐。
    flex-end：与交叉轴的终点对齐。
    center：与交叉轴的中点对齐。
    space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
    space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch（默认值）：轴线占满整个交叉轴。

二、flex 项目属性

1. order

默认情况下，flex 项按源（HTML结构）顺序排布。但是，order 属性可以控制它们在 flex 容器中的显示顺序。

CSS 代码:

.item {
  order: <integer>;  /* 默认值是 0 */
}

order值越小排列越靠前

2. flex-grow（放大因子）

flex-grow 定义了 flex 项在有可用剩余空间时拉伸比例。
它接受的值作为比例，无单位。它规定了 flex 项应该占 flex 容器中可用空间的比例。
如果所有 flex 项的 flex-grow 都设置为 1 ，则父容器中的剩余空间将平均分配给所有子项。 如果其中一个子项的值为 2 ，则该子项占用的剩余空间是其他子项的两倍（或者至少会尽力获得）。

CSS 代码:

.item {
  flex-grow: <number>; /* default 0 */
}

注：负值对于 flex-grow 无效。

比如我们得 flex 容器中有 6 个 flex 项，每个 flex 项的 flex-grow 初始值都是 1。如果我们将每个 flex 项的 flex-grow 相加起来，总和为 6。因此 flex 容器的总宽度被平均分成了 6 份。每个 flex 项增长到填充容器可用空间的1/6。

当我们将第 3 个 flex 项的 flex-grow 设置为 2 时，flex 容器现在被分成了 7 等份，因为所有 flex-grow 属性是：1 + 1 + 2 + 1 + 1 + 1。第 3 个 flex 项占了整个容器空间的 2/7，其他的占了 1/7。

3. flex-shrink（缩小因子）

flex-shrink 定义了 flex 项的收缩的能力。（注：与 flex-grow 拉伸正好相反，flex-shrink 决定 flex 项允许收缩多少比例。）

CSS 代码:

.item {
  flex-shrink: <number>; /* default 1 */
}

注：负值对于 flex-shrink 无效。

4. flex-basis

flex-basis 定义了在分配剩余空间之前 flex 项默认的大小。可以设置为某个长度值（e.g. 20%, 5rem,等）或者关键字。关键字 auto 意味着 flex 项会按照其本来的大小显示

CSS 代码:

.item {
  flex-basis: <length> | auto; /* default auto */
}

如果设置为 0 , 则 flex 项内容周围的空隙不会根据 flex-grow 按比例分配，如果设置为 auto，则 flex 项周围额外的空袭会根据 flex-grow 按照比例分配

5. flex

flex 是 flex-grow、flex-shrink、flex-basis 三个属性的缩写。其中第二个和第三个参数(flex-shrink 和 flex-basis)是可选的。默认值为0 1 auto。

CSS 代码:

.item {
  flex: none | [ < 'flex-grow'> < 'flex-shrink'>? || < 'flex-basis'> ]
}

推荐使用缩写形式而不是单独地设置每一个属性，缩写形式中会更加智能地计算出相关值。

6. align-self

align-self 属性允许某个单独的 flex 项覆盖默认的对齐方式

CSS 代码:

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

三、FlexPC端布局

• 代码：

title>PC端布局的通用解决方案</title>
    <style>
      /*初始化*/
      * {
        font-size: 16px;
        padding: 0;
        margin: 0;
        box-sizing: border-box; /*不加内边距和边框的宽度，默认是content-box*/
      }
      body {
        display: flex;
        flex-flow: column nowrap; /*从上到下排列，不换行*/
      }
      nav {
        display: flex;
        justify-content: start;
        align-items: center;
        min-width: 80px;
        background: #000;
      }
      nav > a:not(:first-of-type) {
        width: 150px;
        text-align: center;
        color: #fff;
        text-decoration: none;
        height: 50px;
        line-height: 50px;
        margin-left: 40px;
      }
      nav > a:not(:first-of-type):hover {
        background: rgba(87, 87, 87, 0.5);
        color: rgb(241, 79, 79);
      }
      nav > a:last-of-type {
        margin-left: auto;
      }
      nav > a > img {
        height: 50px;
      }
      .container {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        margin: 10px auto;
      }
      aside {
        min-width: 200px;
        min-height: 600px;
        background: lightgoldenrodyellow;
      }
      main {
        min-width: 600px;
        min-height: 600px;
        margin: 0 10px;
        background: lightblue;
      }
      footer {
        display: flex;
        height: 80px;
        background: #000;
        justify-content: center;
        align-items: center;
        flex-flow: column nowrap;
      }
      footer > div {
        display: flex;
        justify-content: center;
      }
      footer > div:first-of-type a {
        width: 100px;
        font-size: 14px;
        height: 20px;
      }
      a {
        text-decoration: none;
        color: rgb(184, 184, 184);
      }
      footer > div:last-of-type {
        margin-top: 10px;
        color: rgb(184, 184, 184);
      }
      footer > div:last-of-type span {
        font-size: 14px;
        margin: 0 20px;
      }
    </style>
  </head>
  <body>
    <!-- 页眉 -->
    <header>
      <nav>
        <a href=""><img src="logo.png" alt="" /></a>
        <a href="">首页</a>
        <a href="">电器城</a>
        <a href="">医药馆</a>
        <a href="">营业厅</a>
        <a href="">登录/注册</a>
      </nav>
    </header>
    <!-- 主体 -->
    <div class="container">
      <aside>左边栏</aside>
      <main>主体内容</main>
      <aside>右边栏</aside>
    </div>
    <!-- 页脚 -->
    <footer>
      <div>
        <a href="">关于天猫</a>
        <a href="">帮助中心</a>
        <a href="">开放平台</a>
        <a href="">诚聘英才</a>
        <a href="">联系我们</a>
        <a href="">网站合作</a>
        <a href="">法律声明</a>
        <a href="">隐私权政策</a>
        <a href="">知识产权</a>
        <a href="">廉正举报</a>
        <a href="">规则意见征集</a>
      </div>
      <div>
        <span>浙江省网络食品销售第三方平台提供者备案：浙网食A33010002</span>
        <span> 互联网药品交易服务资格证书：国A20150001</span>
      </div>
    </footer>
  </body>
</html>

• 预览：

四、Flex移动端布局

• 代码：

<title>移动端布局</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      a {
        text-decoration: none;
        color: #666;
      }
      html {
        width: 100vw; /*当前可视区的宽度*/
        /* vh:可视区的高度 */
        height: 100vh;
        font-size: 14px;
        color: #666;
      }
      body {
        min-width: 360px;
        background: #fff;
        display: flex;
        flex-flow: column nowrap;
      }
      body > header {
        color: #fff;
        background: #333;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        width: 100vw;
        padding: 0 15px;
      }
      /*轮播图*/
      body > .slider {
        height: 180px;
      }
      body > .slider > img {
        width: 100%;
      }
      /*导航区*/
      nav {
        height: 200px;
        margin-bottom: 10px;
        display: flex;
        /*转为多行容器*/
        flex-flow: row wrap;
      }
      nav div {
        width: 25vw;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
      }
      nav > div > a:first-of-type {
        text-align: center;
      }
      nav > div img {
        width: 50%;
      }
      /* 热销商品 */
      .hot-goods {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
        margin: 10vw 0;
      }
      .hot-goods > .goods-img {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
      }
      .hot-goods .hot {
        color: coral;
      }
      /* 商品列表 */
      .shop {
        display: flex;
        flex-flow: column nowrap;
        margin-top: 10vw;
        font-size: small;
      }
      .shop > .goods-desc {
        display: flex;
        margin-bottom: 10vw;
      }
      .shop > .goods-desc img {
        width: 20vw;
      }
      .shop > .goods-desc > a:first-of-type {
        margin-left: 5vw;
      }
      .shop > .goods-desc > a:last-of-type {
        margin: 0 10vw;
      }
      .shop > .goods-desc .hot {
        color: coral;
      }
      footer {
        display: flex;
        justify-content: space-around;
        height: 10vw;
        background: rgb(231, 231, 231);
        position: fixed;
        bottom: 0;
        width: 100vw;
      }
      footer > a {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        text-align: center;
      }
      footer > a > span:first-of-type {
        color: coral;
      }
      footer > a > span:last-of-type {
        color: #333;
      }
    </style>
  </head>
  <body>
    <!-- 页眉 -->
    <header>
      <a href="">LOGO</a>
      <span class="iconfont">&#xe61f;</span>
    </header>
    <!-- 轮播图 -->
    <div class="slider">
      <img src="static/images/banner.jpg" alt="" />
    </div>
    <!-- 主导航区 -->
    <nav>
      <div>
        <a href=""><img src="static/images/link4.webp" alt="" /></a>
        <a href="">优惠劵</a>
      </div>
      <div>
        <a href=""><img src="static/images/link1.webp" alt="" /></a>
        <a href="">超市精选</a>
      </div>
      <div>
        <a href=""><img src="static/images/link2.webp" alt="" /></a>
        <a href="">服装百货</a>
      </div>
      <div>
        <a href=""><img src="static/images/link3.webp" alt="" /></a>
        <a href="">数码精品</a>
      </div>
      <div>
        <a href=""><img src="static/images/link4.webp" alt="" /></a>
        <a href="">优惠劵</a>
      </div>
      <div>
        <a href=""><img src="static/images/link1.webp" alt="" /></a>
        <a href="">超市精选</a>
      </div>
      <div>
        <a href=""><img src="static/images/link2.webp" alt="" /></a>
        <a href="">服装百货</a>
      </div>
      <div>
        <a href=""><img src="static/images/link3.webp" alt="" /></a>
        <a href="">数码精品</a>
      </div>
    </nav>
    <!-- 热销商品 -->
    <h2>
      热销商品<span class="iconfont hot" style="color: red;">&#xe60b;</span>
    </h2>
    <div class="hot-goods">
      <div class="goods-img">
        <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
        <p>Apple iPhone 11 128g</p>
        <div>
          <span>6299&nbsp;元</span>
          <span class="iconfont hot">&#xe602;</span>
        </div>
      </div>
      <div class="goods-img">
        <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
        <p>华为笔记本电脑</p>
        <div>
          <span>8999&nbsp;元</span>
          <span class="iconfont hot">&#xe602;</span>
        </div>
      </div>
      <div class="goods-img">
        <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
        <p>Apple iPhone 11 128g</p>
        <div>
          <span>6299&nbsp;元</span>
          <span class="iconfont hot">&#xe602;</span>
        </div>
      </div>
      <div class="goods-img">
        <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
        <p>华为笔记本电脑</p>
        <div>
          <span>8999&nbsp;元</span>
          <span class="iconfont hot">&#xe602;</span>
        </div>
      </div>
      <div class="goods-img">
        <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
        <p>Apple iPhone 11 128g</p>
        <div>
          <span>6299&nbsp;元</span>
          <span class="iconfont hot">&#xe602;</span>
        </div>
      </div>
      <div class="goods-img">
        <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
        <p>华为笔记本电脑</p>
        <div>
          <span>8999&nbsp;元</span>
          <span class="iconfont hot">&#xe602;</span>
        </div>
      </div>
    </div>
    <!-- 商品列表 -->
    <h2>
      商品列表<span class="iconfont hot" style="color: red;">&#xe64b;</span>
    </h2>
    <div class="shop">
      <div class="goods-desc">
        <a href=""><img src="static/images/p40.png" alt="" /></a>
        <a href=""
          >领劵200【12期免息+当天发】HUAWEI/华为P40
          5G手机官方旗舰店官网正品华为mate30pro/直降nova7se/p40pro+
          <span class="iconfont hot" style="vertical-align: middle;"
            >&#xe675;</span
          ></a
        >
      </div>
      <div class="goods-desc">
        <a href=""><img src="static/images/i7.png" alt="" /></a>
        <a href=""
          >华为/HUAWEI&nbsp;MateBook&nbsp;X&nbsp;Pro2020款英特尔十代i7-10510U+16GB+512GB/1TBSSD独显笔记本
          <span class="iconfont hot" style="vertical-align: middle;"
            >&#xe675;</span
          >
        </a>
      </div>
      <div class="goods-desc">
        <a href=""><img src="static/images/p40.png" alt="" /></a>
        <a href=""
          >领劵200【12期免息+当天发】HUAWEI/华为P40
          5G手机官方旗舰店官网正品华为mate30pro/直降nova7se/p40pro+
          <span class="iconfont hot" style="vertical-align: middle;"
            >&#xe675;</span
          ></a
        >
      </div>
      <div class="goods-desc">
        <a href=""><img src="static/images/i7.png" alt="" /></a>
        <a href=""
          >华为/HUAWEI&nbsp;MateBook&nbsp;X&nbsp;Pro2020款英特尔十代i7-10510U+16GB+512GB/1TBSSD独显笔记本
          <span class="iconfont hot" style="vertical-align: middle;"
            >&#xe675;</span
          >
        </a>
      </div>
      <div class="goods-desc">
        <a href=""><img src="static/images/p40.png" alt="" /></a>
        <a href=""
          >领劵200【12期免息+当天发】HUAWEI/华为P40
          5G手机官方旗舰店官网正品华为mate30pro/直降nova7se/p40pro+
          <span class="iconfont hot" style="vertical-align: middle;"
            >&#xe675;</span
          ></a
        >
      </div>
      <div class="goods-desc">
        <a href=""><img src="static/images/i7.png" alt="" /></a>
        <a href=""
          >华为/HUAWEI&nbsp;MateBook&nbsp;X&nbsp;Pro2020款英特尔十代i7-10510U+16GB+512GB/1TBSSD独显笔记本
          <span class="iconfont hot" style="vertical-align: middle;"
            >&#xe675;</span
          >
        </a>
      </div>
      <div class="goods-desc">
        <a href=""><img src="static/images/p40.png" alt="" /></a>
        <a href=""
          >领劵200【12期免息+当天发】HUAWEI/华为P40
          5G手机官方旗舰店官网正品华为mate30pro/直降nova7se/p40pro+
          <span class="iconfont hot" style="vertical-align: middle;"
            >&#xe675;</span
          ></a
        >
      </div>
      <div class="goods-desc">
        <a href=""><img src="static/images/i7.png" alt="" /></a>
        <a href=""
          >华为/HUAWEI&nbsp;MateBook&nbsp;X&nbsp;Pro2020款英特尔十代i7-10510U+16GB+512GB/1TBSSD独显笔记本
          <span class="iconfont hot" style="vertical-align: middle;"
            >&#xe675;</span
          >
        </a>
      </div>
    </div>
    <footer>
      <a href="">
        <span class="iconfont hot">&#xe60c;</span>
        <span>首页</span>
      </a>
      <a href="">
        <span class="iconfont hot">&#xe64b;</span>
        <span>分类</span>
      </a>
      <a href="">
        <span class="iconfont hot">&#xe602;</span>
        <span>购物车</span>
      </a>
      <a href="">
        <span class="iconfont hot">&#xe65b;</span>
        <span>未登录</span>
      </a>
    </footer>
  </body>
</html>

• 预览：

五、学习总结

只有通过多练习才能知道自己到底会不会，自己掌握了那些内容，自己是怎么理解的，还有哪些内容是自己不会的，从而帮助自己更快的学习。