资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/伸缩布局

伸缩布局

blastz / 1155人阅读

摘要：主轴默认方向水平从左向右侧轴始终垂直于主轴在伸缩盒子中，子元素都是按照主轴方向显示的。可以给父元素设置此属性。默认专有子元素设置子元素所占父元素剩余空间的比例注意是剩余属性定义项目的排列顺序。数值越小，排列越靠前，默认为。

伸缩布局

注意，例如img这种多媒体标签，不要用伸缩盒子来布局，设置宽100%即可；

display: flex; (父元素)

必须将父元素设置为伸缩盒子（弹性盒子）

在伸缩盒子中，默认子元素在一行显示，这是伸缩盒子的特点，与脱标无关！

为什么会一行显示？

在伸缩盒子中，有两条轴，一条主轴，一条侧轴。
    主轴：默认方向 - 水平从左向右
    侧轴：始终垂直于主轴
在伸缩盒子中，子元素都是按照主轴方向显示的。

flex-direction: row; (父元素)

设置主轴方向

此时已然可以设置 padding 和 margin ；

row 行(横向)；

column 列(纵向)；

row-revers (横向反转，从右向左，类似右浮动)；

column-reverse(竖直反转)；

justify-content: flex-start; (父元素)

设置元素在主轴的对齐方式

flex-star;

从主轴的开始位置向右对齐显示

flex-end;

在轴的末端对齐

center;

主轴的居中位置处

space-between;

两端对齐，中间自适应

space-around;

环绕效果，子盒子左右两侧都有空白；

space-evenly; (ios专有)

把所有空白平均分配；

没有代码提示。

align-items: stretch; (父元素)

设置元素在侧轴的对齐方式；

只有当子元素全部在一行显示的时候才能用此属性；

子元素有换行的时候用align-content: stretch; (父元素)属性设置元素在侧轴的对齐方式。

其实，当元素多行显示的时候，依旧可以用此属性：

元素每一行都有自己的侧轴，当开启align-items的时候，元素在自己行的侧轴生效。

stretch; (默认)

stretch 拉伸的意思当子元素没有设置高度的时候，默认 stretch 拉伸为父容器的高度；

当子元素有高度的时候，就默认flex-start;

flex-start;

flex-end;

center;

flex-wrap: nowrap; (父元素)

在伸缩盒子中，元素如果超出父元素，默认不换行。可以给父元素设置此属性。

元素换行：当子元素有高度的时候，如果换 2 行，默认是侧轴的一半，3 行，则是侧轴的三分之一，以此类推，元素在此行的start位置。

nowrap;(默认)

wrap - 换行

align-content: stretch; (父元素)

设置元素换行后的对齐方式前提要保证元素是换行的

元素换行：当子元素有高度的时候，如果换 2 行，默认是侧轴的一半，3 行，则是侧轴的三分之一，以此类推，元素在此行的start位置。

flex-start;

flex-end;

center;

space-around;

space-between;

stretch; (默认)

space-evenly; (ios专有)

flex: 1; (子元素)

设置子元素所占父元素 剩余 空间的比例

注意是 剩余 ！！！

order

属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

 

GPU云服务器 云服务器 伸缩模式动态伸缩 伸缩组伸缩规则 伸缩导航 伸缩服务

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1438.html

相关文章

  • Flexbox完全指南（译）

    摘要：本文译自这里，针对本文介绍的属性列个提纲伸缩容器属性伸缩项目属性以后再布局时可以考虑用啦背景布局模块目前上一次工作草案的叫法旨在提供一种更高效的方式来布局排列及分配容器中项目的空间，即便容器大小是未知或动态变化的因此称为。 本文译自 A Complete Guide to Flexbox这里，针对本文介绍的属性列个提纲： 伸缩容器属性： display flex-direction...

    pekonchan 评论0 收藏0

  • flexbox 伸缩布局

    摘要：同时定义了伸缩容器的主轴和侧轴。伸缩项目向一行的中间位置靠齐。伸缩项目会平均地分布在行里。伸缩项目的外边距盒在该行的侧轴上居中放置。默认值伸缩项目拉伸填充整个伸缩容器。主要用来决定伸缩容器剩余空间按比例应扩展多少空间。 flexbox 研究 研究flexbox需要清楚一个概念，主轴和交叉轴的概念，而这两个轴是可以交换的 flexbox的样式属性主要作用于两个部分，一个是伸缩容器，一个是...

    darcrand 评论0 收藏0

  • 使用 CSS3 Flexible Boxes 布局

    摘要：对于块级元素来说，布局的延伸方向是自上而下的，也就是纵向。而对于行内元素来说，布局延伸方向是自左往右的，也就是横向。当属性值相加时，元素并不会溢出，而是表现为两两之间所占空间大小遵循相互的百分比比值。 Flexible Box是什么？Flexible意为可伸缩的，Box意为盒子，可以理解为一种新式的盒模型——伸缩盒模型。由CSS3规范提出，这是在原有的大家非常熟悉的block, inl...

    boredream 评论0 收藏0

  • CSS3 - 伸缩盒模型 Flexible Box Layout

    摘要：比如此属性的默认值为，也就是忽略伸缩项的宽度，管你要多少住房面积，通通按照属性说好的分配，不许换行。，和上文提到的属性实际上是这三个属性的简写形式。 参考链接 使用 CSS3 Flexible Boxes 布局 菜鸟教程链接：http://www.runoob.com/css3/cs... Flexible Box是什么？ Flexible意为可伸缩的，Box意为盒子，可以理解为...

    bingchen 评论0 收藏0

  • CSS3 - 伸缩盒模型 Flexible Box Layout

    摘要：比如此属性的默认值为，也就是忽略伸缩项的宽度，管你要多少住房面积，通通按照属性说好的分配，不许换行。，和上文提到的属性实际上是这三个属性的简写形式。 参考链接 使用 CSS3 Flexible Boxes 布局 菜鸟教程链接：http://www.runoob.com/css3/cs... Flexible Box是什么？ Flexible意为可伸缩的，Box意为盒子，可以理解为...

    gecko23 评论0 收藏0

发表评论

登陆后可评论

0条评论

blastz

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<