CSS3 弹性盒子 flex box

最新推荐文章于 2024-10-05 17:04:37 发布

芯晖闲云

最新推荐文章于 2024-10-05 17:04:37 发布

阅读量566

点赞数 26

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

本文链接：https://blog.csdn.net/snpxchen/article/details/138811457

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习记录下css3弹性布局常用的几个属性

1、CSS3弹性盒子 flex box
   1、由弹性容器和弹性子元素组成
   2、弹性容器通过display设置flex或者inline-flex将其定义成弹性容器
   3、弹性容器内包含一个或者多个弹性子容器

   弹性容器外以及弹性容器子元素内是正常渲染的，弹性盒子只定义了弹性子元素如何在弹性容器内布局
   弹性子元素通常在弹性盒子内显示一行，默认情况每个容器只有一行

   display：flex;

2、排列方式
direction --> 方向

3、flex-direction 顺序指定了弹性子元素在容器中的位置

4、flex-direction: row| row-reverse| column| column-reverse
   row: 横向从左到右排列，左对齐，默认排列
   row-reverse: 反转横向排列，右对齐，从后往前排，最后一项排在最前面
   cloumn: 纵向排列
   column-reverse: 反转纵向排列，从后往前排，最后一项排在最上面

5、justify-content 内容对齐
   justify-content内容对齐使用在弹性容器上，把弹性项沿着容器的主轴线（main axis, 也可理解为横轴）对齐

   justify-content: flex-start| flex-end| center| space-between| space-around;
       flex-start: 弹性项目向行头紧挨着填充，默认值。
       flex-end: 弹性项目向行尾紧挨着填充
       center：弹性项目向中间紧挨着填充
       space-between：弹性项目平均分布在该行上，两端没有空间
       space-around: 弹性项目平均分布在该行上，两端留有空间

6、align-items 项目对齐
   align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

   align-items: flex-start| flex-end| center| baseline| stretch;
       flex-start: 弹性盒子元素侧轴，起始位置
       flex-end：弹性盒子元素侧轴，结束位置
       center：弹性盒子元素侧轴，中间位置
       baseline: 如弹性盒子的行内轴与侧轴为同一条，该值与flex-start等效；其他情况下，该值将参与基线对齐。
       stretch: 如果指定侧轴的大小为auto，这其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制

7、flex-wrap
   用于指定弹性盒子的子元素换行方式
   flex-wrap:nowarp| wrap| wrap-reverse| initial| inherit;
       nowrap: 默认，弹性容器为单行，该情况下弹性容器子项可能会溢出容器
       wrap：弹性容器为多行，该情况下弹性容器溢出会被放置到新行，子项内部会发生断行。
       wrap-reverse：反转warp排列。

8、align-content
   用于修改 flex-wrap 属性的行为。类似于align-items，但是它不是设置弹性子元素的对齐，而是设置各个行的对齐。
   align-content：flex-start| flex-end| center|space-between| space-around|stretch;
       stretch: 各行将会伸展以占用剩余空间；
       flex-start：各行向弹性盒子起始位置堆叠。
       flex-end：各行向弹性盒子结束位置堆叠。
       center：各行向弹性盒子中间堆叠。
       space-between：各行在弹性盒子容器中平均分布
       space-around：各行在弹性盒子容器中平均分布，两端保留子元素与子元素之间间距的一半。

9、弹性子元素属性
   order：排列顺序，默认0.
   magin:auto; 自动获得弹性容器剩余的空间。

   align-self 设置弹性元素自身在侧轴方向上的对齐方式
       align-self: auto | flex-start | flex-end | center | baseline | stetch
       auto: 如果align-self值为auto，则其计算值为元素的父元素的align-items的值，如果其没有父元素，则计算值为stretch
       flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
       flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
       center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
       baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
       stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

   flex 用于指定弹性子元素如何分配空间
       flex： none | flex-grow || flex-shrink || flex-basis
           none: none关键字的计算值为 0 0 auto.

           flex-grow: 定义弹性盒子元素的扩展比率
           flex-shrink：定义弹性盒子元素的收缩比率
           flex-basis：定义弹性盒子元素的默认基准值

10、小结 CSS3 弹性盒子属性
   display   指定 HTML 元素盒子类型。
   flex-direction   指定了弹性容器中子元素的排列方式
   justify-content   设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
   align-items   设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
   flex-wrap   设置弹性盒子的子元素超出父容器时是否换行。
   align-content   修改 flex-wrap 属性的行为，类似align-items, 但不是设置子元素对齐，而是设置行对齐
   flex-flow   flex-direction 和 flex-wrap 的简写
   order   设置弹性盒子的子元素排列顺序。
   align-self   在弹性子元素上使用。覆盖容器的 align-items 属性。
   flex   设置弹性盒子的子元素如何分配空间。