【前端学习笔记】09全方位了解flex布局

flex布局

flex布局-介绍

• 传统的布局有哪些问题：布局的传统解决⽅案，基于盒状模型，依赖 display 属性 / position属性。它对于那些特殊布局⾮常不⽅便，⽐如，垂直居中 就不容易实现。
• Flex布局是什么？Flex 是 Flexible Box 的缩写，意为”弹性布局”，可以简便、完整、响应式地实现各种⻚⾯布局。 任何⼀个容器都可以指定为 Flex 布局。

flex布局-效果

一个最直观的例子，当有以下HTML代码时

<div class="box">
    <div class="children">box1</div>
    <div class="children">box2</div>
    <div class="children">box3</div>
    <div class="children">box4</div>
</div>

默认状态显示为：

当给⽗元素设置成 flex 容器后

.box {
    display: flex;
  }

效果变化如下：可以看到变成横向排列了，类似于 inline-block 的效果：

flex布局-两根轴线

• 两根轴线 — 主轴和交叉轴

我们使⽤ flexbox 的所有属性都跟这两根轴线有关, 所以有必要在⼀开始⾸先理解它。

主轴由 flex-direction 定义，⽽另⼀根轴（交叉轴）垂直于它。flex-direction 主要有两个值：row 、column。

• 默认时值为row ，主轴即横向的这条线：即沿着inline 的⽅向排列，⽽交叉轴就是垂直于主轴的这条线：

• 当 flex-direction 设置为 column 时。主轴即纵向的这条线：即沿着 block
  排列的⽅向，⽽交叉轴就是垂直于主轴的这条线：

flex布局-容器属性

• 容器的常用属性
  flex-direction：主轴⽅向
  flex-wrap ：是否换⾏
  justify-content ：主轴对⻬⽅式
  align-items ：交叉轴对⻬⽅式

flex-direction

上文已介绍，此处省略

flex-wrap

• flex-wrap 常⽤有两个值：nowrap 、 wrap

.box{
    flex-wrap: wrap;
  }

flex-flow

• wrap和direction的简写属性：flex-flow：row wrap

justify-content

• justify-content 属性定义了项⽬在主轴上的对⻬⽅式。常⽤值有：
  flex-start（默认值）：左对⻬
  flex-end：右对⻬
  center： 居中
  space-between：两端对⻬，项⽬之间的间隔都相等。
  space-around：每个项⽬两侧的间隔相等
  

align-items

• align-items 属性定义项⽬在交叉轴上如何对⻬。
  flex-start：交叉轴的起点对⻬。
  flex-end：交叉轴的终点对⻬。
  center：交叉轴的中点对⻬。
  stretch（默认值）：如果项⽬未设置⾼度或设为auto，将占满整个容
  器的⾼度。
  

flex布局-项目属性

• 在 flex 容器下⾯的每⼀个元素，将其称之为“项目”
  项⽬有很多属性，这里只介绍最常⽤的⼀个，那就是 flex 属性，该属性实际上也是以下介绍的三个样式属性的简写。顺序为：增长，缩减，基础； 这⾥描述⼀种写法：

html代码

<div class="box">
  <div class="children box1">box1</div>
  <div class="children box2">box2</div>
  <div class="children box3">box3</div>
  <div class="children box4">box4</div>
</div>

css代码

.children {
    color: #fff;
    text-align: center;
    font-size: 28px;
    background: #1677ff;
  }
  .box2,
  .box4 {
    flex: 1;
  /* 这个数字代表“项⽬”所占容器主轴宽度的⽐例 */
  }
  .box1,
  .box3 {
    flex: 2;
    background-color: tomato;
  }

效果展示

flex-grow

• 指定弹性元素伸展的系数：当父元素有多余的空间时，子元素如何伸展
• flex-grow：0（默认值），父元素的剩余空间会按照flex-grow设置的比例分配

flex-shrink

• 指定弹性元素收缩的系数：当父元素空间不足时，子元素如何收缩

flex-basis

• 指定的是元素在主轴上的基础长度，主轴是横向的则指定的是宽度，主轴是纵向的则指定的是元素高度
• 默认值是auto，表示参考元素自身的高度

order

• 决定元素的排列属性

布局实战

布局实战-flex实现水平·垂直居中

css代码

.box{
            display: flex; 
            justify-content: center;
            align-items: center;
        }

效果展示

布局实战-实现卡片列表

• 要求：完成卡⽚的列表排列展示，每个组件之间有适当的间距。每个卡⽚上要添加8px的圆⻆，并带有阴影。

html代码

<div class="box-list">
  <ul id="card-list">
    <li class="card">
      <img class="box-img" src="../assets/pic-1.png">
      <p class="box-title">波浪</p>
      <p class="box-author">by kk</p>
      <p class="box-description">木落雁嗷嗷，洞庭波浪高</p>
    </li>
    <li class="card">
      <img class="box-img" src="../assets//pic-2.png">
      <p class="box-title">落日</p>
      <p class="box-author">by kk</p>
      <p class="box-description">长河落日圆</p>
    </li>
    <li class="card">
      <img class="box-img" src="../assets//pic-3.png">
      <p class="box-title">礁石</p>
      <p class="box-author">by kk</p>
      <p class="box-description">东临碣石，以观沧海</p>
    </li>
  </ul>
</div>

css代码

p {
    margin: 0;
  }

  .card {
    display: inline-block;
    margin-right: 16px;
    padding: 10px;
    width: 200px;
    height: 300px;
    border-radius: 8px;
    box-shadow: 0 30px 30px 0 rgba(140, 153, 191, 0.20);
  }

  .card > p {
    font-size: 18px;
    /* 超过一行显示"..." */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .box-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
  }

  .box-title {
    margin-top: 24px;
    font-size: 24px;
    font-weight: bold;
  }

  .box-description {
    margin-top: 12px;
    color: gray;
  }

效果展示

布局实战-实现导航目录

• 要求：完成导航⽬录的排列展示，每个导航分类之间有适当的间距。导航标题与下⽅链接也要有⼀定的间距。

html代码

<div class="container">
  <div class="nav">
    <p class="nav-title">书籍</p>
    <ul class="nav-list">
      <a class="nav-self" href="">《CSS权威指南》</a>
      <a class="nav-self" href="">《Javascript权威指南》</a>
      <a class="nav-self" href="">《深入浅出Node.js》</a>
      <a class="nav-self" href="">《HTML5权威指南》</a>
    </ul>
  </div>

  <div class="nav">
    <p class="nav-title">资源</p>
    <ul class="nav-list">
      <a class="nav-self" href="">MDN</a>
      <a class="nav-self" href="">掘金</a>
      <a class="nav-self" href="">Stack Overflow</a>
    </ul>
  </div>

  <div class="nav">
    <p class="nav-title">进阶</p>
    <ul class="nav-list">
      <a class="nav-self" href="">Vue</a>
      <a class="nav-self" href="">React</a>
      <a class="nav-self" href="">小程序</a>
      <a class="nav-self" href="">Ant Design</a>
    </ul>
  </div>
</div>

css代码

p {
  margin: 0;
}
ul {
  list-style: none;
  padding: 0;
}
.nav {
  display: inline-block;
  vertical-align: top;
  margin-right: 16px;
  width: 200px;
}
.nav-title {
  color: #999;
  font-size: 32px;
  font-weight: bold;
}
.nav-list {
  margin-top: 32px;
}
.nav-self {
  display: block;
  color: rgb(60, 133, 243);
  text-decoration: none;
}

效果展示