css中设置交叉轴内容为拉伸,CSS-弹性布局2-交叉轴

4.5 align-items

该属性定义项目在交叉轴上如何对齐。

属性值

说明

stretch(默认值)

如果项目未设置高度或者设为auto，将占满整个容器高度

baseline

项目的第一行文字的基线对齐

flex-start

交叉轴的起点对齐

flex-end

交叉轴的终点对齐

center

交叉轴的中点对齐

源代码

flex-wrap

.wrap{

width: 200px;

display: flex;

flex-direction: row;

flex-wrap: wrap;

height: 200px;

align-items: stretch;

border: 1px solid red;

}

div{

width: 20px;

margin : 5px;

}

.div1{

padding-top: 10px;

background: red;

}

.div2{

background: blue;

}

.div3{

background: yellow;

}

测试文字1

测试文字22

stretch运行结果

baseline运行结果

flex-start运行结果

flex-end运行结果

center运行结果

**4.7 align-content **

该属性定义了多跟轴线的对齐方式。如果项目只有一根轴线，则该属性不起作用。

属性值

说明

stretch(默认值)

轴线占满整个交叉轴

flex-start

交叉轴的起点对齐

flex-end

交叉轴的终点对齐

center

交叉轴的中点对齐

space-between

与交叉轴两端对齐，轴线之间的间隔平均分布

space-around

每根轴线两侧的间隔都相等。所以轴线之间的间隔比边框的间隔大一倍

源代码：

flex-wrap

.wrap{

width: 200px;

display: flex;

flex-direction: row;

flex-wrap: wrap;

height: 200px;

align-content: stretch;

border: 1px solid red;

}

div{

width: 50px;

margin:5px;

}

.div1{

background: red;

}

.div2{

background: blue;

}

.div3{

background: yellow;

}

.div4{

background: green;

}

.div5{

background: gray;

}

stretch运行结果：

stretch运行结果

flex-start运行结果：

flex-start运行结果

flex-end运行结果：

flex-end运行结果

center运行结果：

center运行结果

space-between运行结果：

space-between运行结果

space-around运行结果：

space-around运行结果

css中设置交叉轴内容为拉伸,CSS-弹性布局2-交叉轴相关推荐

css中设置首字下沉效果,CSS如何实现首字下沉效果？
我们在开发 web 页面时,如果是涉及到文字段落的开发,需要对文字设置一些特殊样式以增强 web 页面美观,提升用户体验度.那么今天 w3cschool 小编来教大家 CSS 如何实现首字下沉效果. ...
css中设置鼠标形状的函数,css怎样设置鼠标的形状
css怎样设置鼠标的形状发布时间:2020-11-13 10:10:40 来源:亿速云阅读:91 作者:小新小编给大家分享一下css怎样设置鼠标的形状,相信大部分人都还不怎么了解,因此分享这篇文 ...
Css中设置列表项目符号属性,CSS如何设置列表样式属性，分享
列表样式属性在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...
css中设置图片旋转45度,css 实现缓和变量，鼠标悬停时元素旋转45度动画
可重复使用的变数transition-timing-function 属性,比内置更强大ease ,ease-in ,ease-out 和ease-in-out . HTML CSS :root { ...
html怎么设置字体于字体的间隔,如何在css中设置字体间隔
如何在css中设置字体间隔发布时间:2021-05-15 15:39:05 来源:亿速云阅读:81 作者:Leah 如何在css中设置字体间隔?针对这个问题,这篇文章详细介绍了相对应的分析和解答, ...
html img图片不平铺,如何在css中设置图片不平铺
如何在css中设置图片不平铺发布时间:2021-04-29 15:39:28 来源:亿速云阅读:80 作者:Leah 这篇文章将为大家详细讲解有关如何在css中设置图片不平铺,文章内容质量较高,因 ...
css可以设置文本框颜色吗,如何在css中设置文本框颜色
如何在css中设置文本框颜色发布时间:2021-04-29 15:33:54 来源:亿速云阅读:72 作者:Leah 如何在css中设置文本框颜色?针对这个问题,这篇文章详细介绍了相对应的分析和解 ...
网页html怎么调整字样,怎么在css中设置两个字和三个字对齐
怎么在css中设置两个字和三个字对齐发布时间:2021-03-09 15:16:12 来源:亿速云阅读:85 作者:Leah 怎么在css中设置两个字和三个字对齐?针对这个问题,这篇文章详细介绍了 ...
css 2倍行距,如何在css中设置行间距
如何在css中设置行间距发布时间:2021-04-29 15:36:12 来源:亿速云阅读:63 作者:Leah 如何在css中设置行间距?相信很多没有经验的人对此束手无策,为此本文总结了问题出现 ...

css中设置交叉轴内容为拉伸,CSS-弹性布局2-交叉轴

css中设置交叉轴内容为拉伸,CSS-弹性布局2-交叉轴相关推荐

最新文章

热门文章