打破固定思维：flexbox让布局设计如虎添翼

前端

2023-12-01 21:57:00

flexbox，全称Flexible Box，意为弹性布局。顾名思义，它是一种让元素在容器中灵活排列的布局方式，无需再依赖浮动或绝对定位，从而带来更加简洁、直观的布局体验。

弹性布局的优势

灵活性强： flexbox可根据容器大小自动调整元素的尺寸和位置，非常适合响应式设计。
易于控制： flexbox提供了丰富的属性，可轻松控制元素的排列方式、对齐方式、伸缩行为等。
代码简洁： 使用flexbox布局，代码更加简洁、直观，便于维护和修改。

基本概念

在flexbox布局中，容器被称为弹性容器（flex container） ，容器中的元素被称为弹性项目（flex item） 。弹性容器具有以下属性：

flex-direction：指定主轴方向，即元素排列的方向。
flex-wrap：指定元素是否允许换行。
justify-content：指定元素在主轴上的对齐方式。
align-items：指定元素在侧轴上的对齐方式。
align-content：指定多行元素在侧轴上的对齐方式。

弹性项目具有以下属性：

order：指定元素在容器中的排列顺序。
flex-grow：指定元素在主轴上允许的伸缩比例。
flex-shrink：指定元素在主轴上允许的收缩比例。
flex-basis：指定元素的初始尺寸。
align-self：指定元素在侧轴上的对齐方式，可覆盖父元素的align-items属性。

容器属性学习

flexbox布局的容器属性主要有flex-direction、flex-wrap、justify-content、align-items和align-content。

flex-direction

flex-direction属性指定弹性容器的主轴方向，即元素排列的方向。取值可以是：

row：元素从左到右排列，这是默认值。
row-reverse：元素从右到左排列。
column：元素从上到下排列。
column-reverse：元素从下到上排列。

flex-wrap

flex-wrap属性指定元素是否允许换行。取值可以是：

nowrap：元素不允许换行，超出容器宽度部分会被截断。
wrap：元素允许换行，超出容器宽度部分会自动换行。
wrap-reverse：元素允许换行，但换行方向与wrap相反。

justify-content

justify-content属性指定元素在主轴上的对齐方式。取值可以是：

flex-start：元素在主轴上靠左对齐。
flex-end：元素在主轴上靠右对齐。
center：元素在主轴上居中对齐。
space-between：元素在主轴上平均分布，两端留有空间。
space-around：元素在主轴上平均分布，元素之间留有均匀的空间。

align-items

align-items属性指定元素在侧轴上的对齐方式。取值可以是：

flex-start：元素在侧轴上靠上对齐。
flex-end：元素在侧轴上靠下对齐。
center：元素在侧轴上居中对齐。
stretch：元素在侧轴上拉伸，以填满容器的高度。

align-content

align-content属性指定多行元素在侧轴上的对齐方式。取值可以是：

flex-start：多行元素在侧轴上靠上对齐。
flex-end：多行元素在侧轴上靠下对齐。
center：多行元素在侧轴上居中对齐。
space-between：多行元素在侧轴上平均分布，两端留有空间。
space-around：多行元素在侧轴上平均分布，元素之间留有均匀的空间。

项目属性学习

flexbox布局的项目属性主要有order、flex-grow、flex-shrink、flex-basis和align-self。

order

order属性指定元素在容器中的排列顺序。取值可以是数字，数字越小，元素排列的顺序越靠前。默认值为0。

flex-grow

flex-grow属性指定元素在主轴上允许的伸缩比例。取值可以是数字或initial。默认值为0，即元素在主轴上不允许伸缩。

flex-shrink

flex-shrink属性指定元素在主轴上允许的收缩比例。取值可以是数字或initial。默认值为1，即元素在主轴上允许收缩。

flex-basis

flex-basis属性指定元素的初始尺寸。取值可以是百分比、长度值或auto。默认值为auto，即元素的初始尺寸由其内容决定。

align-self

align-self属性指定元素在侧轴上的对齐方式。取值可以是auto、flex-start、flex-end、center或stretch。默认值为auto，即元素的侧轴对齐方式由父元素的align-items属性决定。

实战演练

下面通过一个实战案例来演示如何使用flexbox布局。

假设我们要创建一个响应式导航栏，其中包含一个logo、三个菜单项和一个搜索框。

<div class="navbar">
  <div class="logo">
    <img src="logo.png" alt="Logo">
  </div>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <div class="search">
    <input type="text" placeholder="Search">
  </div>
</div>

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.logo {
  flex: 0 0 auto;
}

nav {
  flex: 1 1 auto;
}

ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

li {
  list-style-type: none;
  margin: 0 10px;
}

a {
  text-decoration: none;
  color: #333;
}

.search {
  flex: 0 0 auto;
}

input[type="text"] {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}