布局 父元素属性之 align"/>
flex布局 父元素属性之 align
align-content
align-content:设置多行子元素在侧轴上(默认侧轴为y轴)的排列方式
注意:该属性只对父元素中有换行情况的子元素有效,即父元素代码中有“ flex-wrap:wrap;”,才会对子元素有效
align-content的属性值:
属性值 | 含义 |
---|---|
flex-start | 子元素在侧轴的头部开始排列 (默认值) |
flex-end | 子元素在侧轴的尾部开始排列 |
center | 子元素在侧轴上居中显示 |
space-around | 子元素在侧轴上平分剩余空间 |
space-between | 子元素线贴着侧轴的两边,再平分剩余空间 |
stretch | 设置子元素高度,平分父元素高度 |
对以上几个属性值进行举例解释(以y轴为侧轴为列):
flex-start
<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
</div>
<style type="text/css">div{display: flex; width: 800px;height: 400px;background-color: orange;flex-wrap: wrap; /* 有了换行,故侧轴上的排列方式用align-content */align-content: flex-start;}div span{width: 150px;height: 100px;background: skyblue;margin: 10px;}</style>
运行结果:子元素从侧轴的头部开始排列
flex-end
<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
</div>
<style type="text/css">div{display: flex; width: 800px;height: 400px;background-color: orange;flex-wrap: wrap; align-content: flex-end;}div span{width: 150px;height: 100px;background: skyblue;margin: 10px;}</style>
运行结果:子元素从侧轴的尾部开始排列
center
<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
</div>
<style type="text/css">div{display: flex; width: 800px;height: 400px;background-color: orange;flex-wrap: wrap; align-content: center;}div span{width: 150px;height: 100px;background: skyblue;margin: 10px;}</style>
运行结果:子元素在侧轴上居中对齐
space-around
<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
</div>
<style type="text/css">div{display: flex; width: 800px;height: 400px;background-color: orange;flex-wrap: wrap; align-content: space-around;}div span{width: 150px;height: 100px;background: skyblue;margin: 10px;}</style>
运行结果:子元素在侧轴上平分剩余空间
space-between
<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
</div>
<style type="text/css">div{display: flex; width: 800px;height: 400px;background-color: orange;flex-wrap: wrap; align-content: space-between;}div span{width: 150px;height: 100px;background: skyblue;margin: 10px;}</style>
运行结果:子元素先贴着侧轴的两边,再平分侧轴上的剩余空间
stretch
<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
</div>
<style type="text/css">div{display: flex; width: 800px;height: 400px;background-color: orange;flex-wrap: wrap; align-content: stretch;}div span{width: 150px;height: 50px; background: skyblue;margin: 0 10px;}</style>
运行结果:除去子元素所占高度,再平分父元素高度
上述如果没有给子元素设置高度,运行结果为:(没有给子元素设置高度,这两行子元素平分父元素高度)
更多推荐
flex布局 父元素属性之 align
发布评论