flex布局

xiaobai_cpp

已于 2024-03-02 19:39:46 修改

阅读量427

点赞数 7

分类专栏： css 文章标签： css

于 2024-03-02 19:23:16 首次发布

本文链接：https://blog.youkuaiyun.com/xiaobai_cpp/article/details/136420001

版权

css 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了CSSFlexbox布局中的关键概念，如弹性容器的设置、内外边距控制、元素大小调整、项目对齐方式以及flex-direction、flex-wrap和flex-flow等属性的用法，帮助开发者掌握灵活的网页布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置弹性容器

   display: flex;

容器及其内部元素设置内外边距

   padding: 1.5em;
   margin: .5em;

设置元素大小

   flex: 2; 简写  
   flex-grow: 2;放大系数，整数，0不放大
   flex-shrink: 1;缩小系数，整数，0不缩小
   flex-basis: 0%;初始的“主尺寸”，flex-basis 属性可以设
置为任意的 width 值，包括 px、 em、百分比

完美的居中

  justify-content: center;
  align-items: center;

flex-direction定义容器要在哪个方向上堆叠 flex 项目

flex-direction: column;从上到下
flex-direction: column-reverse;从下到上
flex-direction: row;从左到右
flex-direction: row-reverse;从右到左

flex-wrap 是否应该对 flex 项目换行

flex-wrap: wrap;换行
flex-wrap: nowrap;不换行

wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行：

flex-wrap: wrap-reverse;

flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。

flex-flow: row wrap;

justify-content 属性用于对齐 flex 项目：

justify-content: center;将 flex 项目在容器的中心对齐：
justify-content: flex-start;将 flex 项目在容器的开头对齐（默认）
justify-content: flex-end;将 flex 项目在容器的末端对齐：
justify-content: space-around;显示行之前、之间和之后带有空格的 flex 项目
justify-content: space-between;显示行之间有空格的 flex 项目

align-items 属性用于垂直对齐 flex 项目。

align-items: center;将 flex 项目在容器中间对齐：
align-items: flex-start;将 flex 项目在容器顶部对齐：
align-items: flex-end;将弹性项目在容器底部对齐
align-items: stretch;拉伸 flex 项目以填充容器（默认）：
align-items: baseline;使用不同的 font-size 来演示项目已按文本基线对齐：

align-content 属性用于对齐弹性线,多行多列对齐方式。

align-content: space-between;用于对齐弹性线。
align-content: space-around;显示弹性线在其之前、之间和之后带有空格：
align-content: stretch;拉伸弹性线以占据剩余空间（默认）：
align-content: center;在容器中间显示弹性线：
align-content: flex-start;在容器开头显示弹性线：
align-content: flex-end;在容器的末尾显示弹性线：

align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式

align-self: center;
align-self: flex-start;
align-self: flex-end;