<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
/* flex布局父项常见属性 */
div{
display: flex;
/* 设置主轴方向 row 行 column 列
row-reverse 从右到左,默认从左到右
column-reverse 从下到上,默认从上到下
*/
flex-direction: row;
/*justify-content 设置主轴上子元素的排列方式
属性值:
flex-start:默认值 从头部开始,如果主轴是x轴,则从左到右
flex-end:从尾部开始排列
center:在主轴居中对齐(如果主轴是x轴则水平居中)
space-around:平分剩余空间
space-between:先两边贴边 再平分剩余空间(重要)
*/
/* justify-content: flex-end; */
justify-content: space-between;
/* flex-wrap: 设置子元素是否换行
属性值:
nowrap:不换行
wrap:换行
*/
flex-wrap: wrap;
/* align-items:设置侧轴上的子元素的排列方式(单行)
属性值:
flex-start :从上到下
flex-end:从下到上
center:挤在一起居中(垂直居中)
stretch:拉伸(默认值)
*/
/* align-items: center; */
/*align-content:设置侧轴上的子元素的排列方式(多行)
属性值:
flex-start:默认值在侧轴的头部开始排列
flex-end:在侧轴的尾部开始排列
center:在侧轴中间显示
space-around:子项在侧轴平分剩余空间
space-between:子项在侧轴先分布在两头,再平分剩余空间
stretch:设置子项元素高度平分父元素高度
*/
align-content: space-between;
/*
flex-flow 属性是flex-derection和flex-wrap属性的复合属性
flex-flow:row wrap;
*/
height: 500px;
width: 300px;
background-color: red;
}
/* flex布局子项常见属性 */
div span{
/* flex 属性定义子项目分配剩余空间,用flex来表示占多少份数 */
/* flex:<份数>;默认为0 */
/* align-self 控制子项自己在侧轴上的排列方式
可覆盖align-items属性,默认值auto,表示继承父元素的align-items,若没有父元素,则等同于stretch
*/
/* order: 属性定义项目的排列顺序,数值越小,排列越靠前,默认是0;
tips:与z-index不一样
*/
width: 100px;
height: 100px;
background:pink;
margin-left: 5px;
margin-top: 5px;
}
</style>
</head>
<body>
<div id="">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>
移动端flex布局 父项-子项 常见属性
最新推荐文章于 2024-03-01 15:52:05 发布
本文深入探讨了Flex布局,详细解释了flex-direction、justify-content、align-items和align-content等属性,并通过实例展示了如何使用这些属性实现灵活的网页布局。内容涵盖了Flex布局的基本概念、属性设置及其对子元素排列的影响,旨在帮助开发者更好地理解和应用Flex布局。
摘要由CSDN通过智能技术生成