【2024】前端学习笔记11-网页布局-弹性布局flex

学习笔记

网页布局
弹性布局：flex
案例：flex布局案例

网页布局

在页面布局中，display属性用于设置一个元素的显示方式。它可以指定元素是作为块级元素、内联元素还是充当表格元素显示。

display的常见属性值：

block：将元素显示为块级元素，块级元素会独占一行，并强制换行。可设置宽度、高度、内边距和外边距。
none：隐藏元素，使其在页面上不可见。
inline：将元素显示为行内元素，行内元素不会独占一行，可以在同一行内与其他元素一起显示。不能设置宽度和高度，尺寸由内容决定。
inline-block：将元素显示为行内块元素。结合了块级元素和行内元素的特点，既可以设置宽度和高度，又可以在同一行内显示。
flex：将元素设置为弹性布局容器，允许以灵活的方式控制子元素的布局和尺寸。
grid：将元素设置为网格布局容器，允许将元素组织成行和列的网格中。

弹性布局：flex

写法：

css 复制代码

display: flex

flex常用属性：

flex-direction：定义排列方向
- row：默认，从左到右水平排列
- row-reverse：从右到左水平排列
- column：从上到下垂直排列
- column-reverse：从下到上垂直排列
flex-wrap：定义换行方式
- nowrap：默认，不换行，即使已经超出指定范围
- wrap：换行，从上到下依次排列
- wrap-reverse：换行，从下到上，从左到右顺序排列
justify-content：子元素对齐方向
- flex-start：默认，在主轴的起始位置对齐
- flex-end：在主轴的结束位置对齐
- center：在主轴方向上居中对齐
- space-between：在主轴方向上均匀分布，第一个弹性项在主轴起始位置，最后一个弹性项在主轴结束位置
- space-around：在主轴方向上均匀分布，并且每个弹性项两侧的间距相等
- space-evenly：在主轴方向上均匀分布，并且每个弹性项之间的间距以及边缘到第一个和最后一个弹性项的间距都相等

案例：flex布局案例

HTML结构代码：

html 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex 布局案例</title>
  <link rel="stylesheet" href="css/test.css">
</head>

<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>
</body>

CSS结构代码：

css 复制代码

.container {
  display: flex;
  /* 设置 flex 容器 */
  flex-direction: row;
  /* 主轴方向为水平方向从左到右 */
  flex-wrap: nowrap;
  /* 不换行 */
  justify-content: space-between;
  /* 项目在主轴上均匀分布，两端留有空白 */
  background-color: rgb(232, 51, 51);
  width: 800px;
  padding: 10px;
}

.item {
  background-color: skyblue;
  padding: 20px;
  color: rgb(59, 124, 170);
  font-size: 18px;
}

展示效果：

CSS内容解释：

container类是将容器设置为弹性容器（display: flex）；

并设置主轴方向为水平从左到右（flex-direction: row）；

控制弹性容器内的子元素为不换行（flex-wrap: nowrap）；

子元素在主轴上的对齐方式为均匀分布，两端留有空白（justify-content: space-between）。

更多display详细使用请参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/display