小白学前端04--flex布局「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」。前言这

「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」。

前言

这篇文章我们将会学习flex布局
之前没学过flex布局, 一些小的布局都会让你很头疼但是当你学过flex布局之后一切将会变得很舒适
这篇文章只会讲一些基本的flex布局不会深入去讲

内容

flex的基本使用方法

任何一个容器都可以指定为flex布局

display: flex;
flex布局可以让所有的子元素称为flex容器的子项
flex容器中的子项有两种排列方式用以下方式可以设置谁为主轴(默认横向为主轴)
- 横向排列
  
  flex-direction: row;
- 竖向排列
  
  flex-direction: row;
flex容器的其他几个属性
- flex-wrap 是否换行
  
  flex-wrap: warp | nowarp | wrap-reverse; 换行 | 不换行 | 反转
- justify-content 属性定义了项目在主轴上的对齐方式。
  justify-content 的一些属性:
  - flex-start（默认值）：左对齐
  - flex-end：右对齐
  - center：居中
  - space-between：两端对齐，项目之间的间隔都相等。
  - space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
- align-content 和 justify-content 差不多只不过它是竖轴上的对齐方式
  
  属性:
  
  flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。
- align-items 属性定义项目在交叉轴上如何对齐。
  
  属性:
  
  flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
- 属性到这就差不多了

dome 演示

主要演示flex布局的方便性, 你也可以试试不用这种方法你会发现相当麻烦

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0, minimum-scale=1.0'>
<title>演示</title>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  ul {
    box-sizing: border-box;
    /* 设置为flex容器 */
    display: flex;
    /* 设置换行 */
    flex-wrap: wrap;
    /* 去除li前边的小点 */
    list-style: none;
    width: 500px;
    height: 200px;
    background-color: green;
    color: #fff;
  }
  ul li {
    flex: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
  }

  ul li img {
    width: 38px;
    height: 38px;
    padding: 20px 0;
  }
</style>
</head>
<body>
  <ul>
    <li>
      <img src="nav1.png" alt="">
      <p>热卖手机</p>
    </li>
    <li>
      <img src="nav1.png" alt="">
      <p>热卖手机</p>
    </li>
    <li>
      <img src="nav1.png" alt="">
      <p>热卖手机</p>
    </li>
    <li>
      <img src="nav1.png" alt="">
      <p>热卖手机</p>
    </li>
    <li>
      <img src="nav1.png" alt="">
      <p>热卖手机</p>
    </li>
    <li>
      <img src="nav1.png" alt="">
      <p>热卖手机</p>
    </li>
    <li>
      <img src="nav1.png" alt="">
      <p>热卖手机</p>
    </li>
    <li>
      <img src="nav1.png" alt="">
      <p>热卖手机</p>
    </li>
    
  </ul>
</body>
</html>

后记

这篇文章粗糙的讲解了flex布局, 以文字的形式想讲清楚我的水平还是太次所以我推荐阮一峰的flex教学
链接: 阮一峰的flex教学