htmlCss-------Day1(dispaly）

最新推荐文章于 2024-12-28 21:20:44 发布

頑張ってちしじょ

最新推荐文章于 2024-12-28 21:20:44 发布

阅读量157

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_45170547/article/details/102882410

本文深入讲解CSS Flex布局，包括display属性、伸缩布局的优势、主轴与侧轴的对齐方式、子元素的伸缩比例及对齐设置，以及多行布局的控制，帮助读者掌握响应式设计的核心技巧。

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

今天写了京东网页的中间一个晓得导航栏，然后对伸缩盒子进行了了解加油(ง •_•)ง。
display

display 属性规定元素如何显现。

css3伸缩布局
弹性盒子的优点：可根据页面的放大而放大，缩小而缩小。
给父元素添加伸缩盒子属性

display:flex

改变主轴的方向（给父元素添加）

flex-direction:row;  /* 默认值，表示水平排列 */
flex-direction:row-reverse;  /* 表示**相反**水平排列 */
flex-direction:column;  /*  表示垂直排列 */
flex-direction: column-reverse;   /* 表示**相反**垂直排列 */
flex-direction：initial    /*  默认值  不继承*/
flex-direction：inherit   /* 从父元素继承该属性  */
flex-direction: unset;   /* 默认继承属性与inherit值相同 若默认不继承则宇initial值相同  */

在这里插入图片描述

设置主轴方向上盒子的对齐方式（在父元素上添加）

justify-content: center;   /*表示子盒子全部中间对齐，中间无空*/

justify-content: flex-start;   /* (默认值）左对齐 */

justify-content: flex-end;   /* 右对齐 */

justify-content: space-around;   /* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 */

justify-content: space-between;   /*两端对齐，中间的间隔相等 */
justify-content:space-evenly;   /*从边框到元素的间距都是相等的 */
**justify-content:start**  /* 从行首开始排列。每行第一个元素与行首对齐，同时所有后续的元素与前一个对齐。 */
**justify-content:safe**  /* 如果项目的大小溢出对齐容器，则将对齐该项目，就像对齐模式为一样  start。*/

在这里插入图片描述

设置侧轴方向上的对齐方式（在父元素上添加）

align-items: flex-start;   /* 子盒子以侧轴的开始对齐（上对齐） */

align-items: flex-end;   /* 子盒子以侧轴的末尾对齐（底对齐） */

align-items: center;   /* 子盒子以侧轴的中间对齐（上下垂直居中对齐） */

align-items: stretch;   /* 子盒子在侧轴上根据父盒子高度自动拉伸，适应容器（但不能给子盒子设置height） */
align-items: baseline; /* 项目的第一行文字的基准线对齐 */

在这里插入图片描述

设置多条轴线（在父元素上添加）
对于多行的子元素作为一个整体在纵轴上的排列方式，该属性对单行无效。
父元素必须设置了display:flex; 、排列方式：flex-direction:row; 、是否换行： flex-wrap:wrap;

align-content:flex-start  /* 左对齐 */
align-content:flex-end  /* 右对齐 */
align-content:center  /* 居中对齐 */
align-content:space-between  /* 两端对齐 */
align-content:space-around  /* 沿轴线均匀分布*/
align-content:stretch  /* 默认值 会拉伸容器内每行占用的空间，填充方式为给每行下方增加空白 */
align-content:inherit /* 使得元素的这个属性继承自它父元素的属性 */
align-content:innitial /* 使得元素这个元素的属性为默认初始值 */

在这里插入图片描述

设置子盒子自己的伸缩比列（子元素添加）

flex: 1;  /* 根据子盒子数量，将 去掉定义的宽度width后 剩余的宽度等分，占1份 */

对于子盒子，若某个子盒子没有设置比例flex:n;，但其他子盒子设置了比例flex:n;，最后比例会按照剩余宽度分配。

剩余宽度分配 = 父盒子的总宽度 - 没有设置比例的子盒子的宽度。

设置子元素是否换行显示（父元素添加）

flex-wrap: nowrap;   /* 默认值，表示不换行，子盒子的宽度值自动适应父盒子，之前设置的宽度无效 */

flex-wrap: wrap;   /* 表示换行，子盒子的宽度使用之前设置的宽度，父盒子一行无法容纳时换行显示 */

flex-wrap: wrap-reverse;   /* 表示自动换行，但反转（从底端向上换行） */

在这里插入图片描述

** flex-flow（在父元素）**
集中了flex-direction和flex-wrap的属性

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

设置子盒子自己的对齐方式（子元素）
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

align-self: center;  /* 加了这行属性的子盒子沿侧轴居中 */

在这里插入图片描述

设置子盒子的排序方式（子元素）

order: 0;   /* 默认值为0。数值越小排列越靠前 */

在这里插入图片描述

补充

CSS initial 关键字
- 用于设置css属性为它的默认值。
- 可以用于任何HTML上的任何css属性。

参考文章：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html （非常的全面而且配了图，更加的直观）
https://www.jianshu.com/p/7e93a4795190