css3弹性布局

CSS3的弹性布局（Flexbox）是一种强盛的布局模式，用于创建机动且相应式的布局布局。它使得容器内的项目可以或许更智能地分配空间，而且可以轻松调解它们的对齐方式。下面是一些关键概念和示例代码来资助你更好地明白和使用Flexbox。
根本设置

起首，界说一个Flex容器和几个项目。我们从最简单的布局开始：
css深色版本

1. .container {
2.   display: flex; /* 启用Flex布局 */
3. }
5. .item {
6.   width: 100px;
7.   height: 100px;
8.   background-color: lightblue;
9.   margin: 5px;
10. }

复制代码

在这个例子中，.container是一个Flex容器，而.item是它的子元素（即Flex项目）。默认情况下，全部的项目会沿着主轴（程度方向）分列，而且尽大概地靠近容器的起始位置。
紧张属性详解

Flex容器属性

• flex-direction：控制主轴的方向。
  
  
  
  • row (默认)：从左到右分列。
    
  • row-reverse：从右到左分列。
    
  • column：从上到下分列。
    
  • column-reverse：从下到上分列。
    
  
  
• justify-content：控制主轴上的对齐方式。
  
  
  
  • flex-start (默认)：项目在主轴的起始位置对齐。
    
  • center：项目在主轴居中对齐。
    
  • flex-end：项目在主轴的竣事位置对齐。
    
  • space-between：项目之间有等间距，第一个项目在起始位置，末了一个项目在竣事位置。
    
  • space-around：项目附近有等间距。
    
  • space-evenly：项目之间及与界限的间距相当。
    
  
  
• align-items：控制交织轴上的对齐方式。
  
  
  
  • stretch (默认)：如果项目未设置高度或宽度，它将被拉伸以添补容器。
    
  • center：项目在交织轴居中对齐。
    
  • flex-start：项目在交织轴的起始位置对齐。
    
  • flex-end：项目在交织轴的竣事位置对齐。
    
  • baseline：项目基线对齐。
    
  
  
• flex-wrap：控制项目是否可以换行。
  
  
  
  • nowrap (默认)：不换行。
    
  • wrap：允许换行。
    
  • wrap-reverse：允许换行，但第一行出如今容器的底部。
    
  
  
• gap：设置项目之间的间距。
  
  
  
  • gap: 10px; 大概 row-gap: 10px; column-gap: 10px;
    
  
  
• align-content：当有多行时，控制多行在交织轴上的对齐方式。
  
  
  
  • stretch (默认)：每行占据类似的高度。
    
  • center：全部行在交织轴居中对齐。
    
  • flex-start：全部行在交织轴的起始位置对齐。
    
  • flex-end：全部行在交织轴的竣事位置对齐。
    
  • space-between：行之间有等间距。
    
  • space-around：行附近有等间距。
    
  
  

Flex项目属性

• order：界说项目的分列序次。
  
  
  
  • order: 1; 数值越小，分列越靠前。
    
  
  
• flex-grow：界说项目的放大比例。
  
  
  
  • flex-grow: 1; 如果存在剩余空间，项目将会放大。
    
  
  
• flex-shrink：界说项目的缩小比例。
  
  
  
  • flex-shrink: 1; 如果空间不敷，项目将会缩小。
    
  
  
• flex-basis：界说在分配多余空间之前，项目占据的主轴空间。
  
  
  
  • flex-basis: auto; 默认值，根据内容自动调解。
    
  • flex-basis: 200px; 固定宽度。
    
  
  
• flex：是flex-grow, flex-shrink 和 flex-basis 的简写。
  
  
  
  • flex: 1 1 auto; 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: auto;
    
  • flex: 0 0 200px; 不放大也不缩小，固定宽度为200px。
    
  
  
• align-self：允许单个项目有本身的对齐方式，可以覆盖align-items属性。
  
  
  
  • align-self: center; 项目在交织轴居中对齐。
    
  
  

示例代码

程度居中对齐

css深色版本

1. .container {
2.   display: flex;
3.   justify-content: center; /* 水平居中 */
4.   align-items: center; /* 垂直居中 */
5.   height: 300px; /* 设置容器高度 */
6. }
8. .item {
9.   width: 100px;
10.   height: 100px;
11.   background-color: lightblue;
12. }

复制代码

多行布局

css深色版本

1. .container {
2.   display: flex;
3.   flex-wrap: wrap; /* 允许换行 */
4.   gap: 10px; /* 项目间间距 */
5. }
7. .item {
8.   flex: 1 1 calc(33.333% - 20px); /* 每个项目占三分之一宽度减去间距 */
9.   height: 100px;
10.   background-color: lightgreen;
11. }

复制代码

控制项目序次

css深色版本

1. .container {
2.   display: flex;
3. }
5. .item {
6.   width: 100px;
7.   height: 100px;
8.   background-color: lightblue;
9.   margin: 5px;
10. }
12. .item:nth-child(2) {
13.   order: -1; /* 将第二个项目移到最前面 */
14. }

复制代码

通过这些根本的概念和例子，你应该可以或许更好地明白和应用Flexbox来创建复杂的相应式布局。记得在现实项目中不绝实验差别的设置，找到最得当你筹划需求的方法。