CSS3弹性盒模型开发笔记（二）

关于CSS3弹性盒模型开发笔记二，主要分为以下几个部分：

标题

在文章中，标题是非常重要的元素，可以通过#符号表示不同的级别，如一级标题使用一个#，二级标题使用两个#，以此类推。在CSS3弹性盒模型开发笔记二中，我们可以将标题分为以下几个级别：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

块级元素和行内元素

在CSS中，元素分为块级元素和行内元素，块级元素会占据一整行，比如div、p等，而行内元素只会占据自身的大小，比如span、a等。其中，在弹性盒模型中，弹性容器和弹性子元素都可以设置为块级或行内元素。

弹性布局的基本概念

弹性布局可以通过display:flex属性来实现，其中，弹性容器和弹性子元素都有各自不同的属性和相关性质。弹性容器的属性主要有：

• flex-direction：控制弹性子元素的排列方向，可以设置为row、row-reverse、column、column-reverse。
• flex-wrap：控制弹性子元素的换行方式，可以设置为nowrap、wrap、wrap-reverse。
• flex-flow：同时设置flex-direction和flex-wrap。
• justify-content：控制弹性子元素在主轴上（横向）的对齐方式，可以设置为flex-start、flex-end、center、space-between、space-around、space-evenly。
• align-items：控制弹性子元素在交叉轴上（纵向）的对齐方式，可以设置为flex-start、flex-end、center、baseline、stretch。
• align-content：只有弹性容器有，控制多行弹性子元素在交叉轴上的对齐方式，可以设置为flex-start、flex-end、center、space-between、space-around、stretch。

弹性子元素的属性主要有：

• order：决定了弹性子元素的排列顺序，默认为0，可以为正数和负数。
• flex-grow：设置弹性子元素的放大比例，默认为0，代表不放大。
• flex-shrink：设置弹性子元素的缩小比例，默认为1，代表可以缩小。
• flex-basis：设置弹性子元素在主轴方向上的基本大小，可以为固定值或者百分比。
• flex：同时设置flex-grow、flex-shrink和flex-basis。
• align-self：控制弹性子元素在交叉轴上的对齐方式，可以设置为flex-start、flex-end、center、baseline、stretch。其中，可以覆盖弹性容器的align-items属性。

示例说明

示例一：使用弹性盒模型在水平和垂直方向上实现居中

<div class="container">
  <div class="item">示例一</div>
</div>

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 300px;
  background-color: #f2f2f2;
}

.item {
  background-color: #4CAF50;
  color: white;
  font-size: 24px;
  padding: 20px;
}

示例二：使用弹性盒模型实现两个弹性子元素的侧边排列

<div class="container">
  <div class="item">示例二：左侧</div>
  <div class="item">示例二：右侧</div>
</div>

.container {
  display: flex;
  justify-content: space-between; /* 排列在两侧 */
  align-items: center;
  height: 100px;
  background-color: #f2f2f2;
}

.item {
  background-color: #4CAF50;
  color: white;
  font-size: 24px;
  padding: 20px;
}

以上就是CSS3弹性盒模型开发笔记二的完整攻略。