flex-direction属性(CSS设置)
flex-direction属性(CSS设置)
FLEX布局
flex:flexiblebox的缩写,意为“弹性布局”,有很强的灵活性,任何一个容器都可以设置为flex布局。
在使用flex布局时,必须给父元素添加flex属性(display:flex;),才能控制子元素的位置和排列方式。
当为父盒子设置为flex布局后,子元素的float、clear和vertical-align属性将失效。
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局。
采用flex布局的元素称为“容器”,它的所有子元素称为“项目”。
FLEX布局父元素常见属性
以下六个属性是添加在父元素上的
flex-direction设置主轴方向
justify-content设置主轴上子元素的排列方式
flex-wrap设置子元素是否换行
align-content设置侧轴上的子元素的排列方式(只应用于有多行子元素)
align-items设置侧轴上的子元素的排列方式(只应用于有单行子元素)
flex-flow复合属性是flex-direction和flex-wrap的简写形式
下面对这六个属性值进行详细介绍
flex-direction:设置主轴方向
在flex布局中,有主轴和侧轴之分。
默认情况下:
主轴的方向是x轴的方向,水平向右
侧轴的方向是y轴的方向,垂直向下
如图:
在这里插入图片描述
flex-direction属性值决定主轴的方向
注意:主轴和侧轴是会变化的,就看flex-direction设置谁为主轴,剩下的就是侧轴,子元素是根据主轴来排列的
flex-direction的属性值有:
属性值含义
row主轴为x轴,内容从左向右排列(默认值)
row-reverse主轴为x轴,内容从右向左排列
column主轴为y轴,内容从上至下排列
column-reverse主轴为y轴,内容从下至上排列
下面通过具体例子来解释这几个属性值
row
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<styletype="text/css">
div{
display:flex;/*给父级添加flex属性*/
width:800px;
height:300px;
background-color:orange;
/*默认的主轴是x轴,y轴是侧轴*/
flex-direction:row;/*这句代码写不写都无所谓,这是默认情况下的值*/
}
divspan{
width:150px;
height:100px;
background:skyblue;
}
</style>
执行结果:(因为默认的主轴就是x轴,元素跟着主轴从左向右排列,因此是123)
在这里插入图片描述
row-reverse
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<styletype="text/css">
div{
display:flex;
width:800px;
height:300px;
background-color:orange;
flex-direction:row-reverse;
}
divspan{
width:150px;
height:100px;
background:skyblue;
}
</style>
执行结果:(主轴为x轴,但是元素是从右向左开始排列,所以是321)
在这里插入图片描述
column
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<styletype="text/css">
div{
display:flex;
width:800px;
height:300px;
background-color:orange;
flex-direction:column;/*将y轴设为主轴,此时x轴为侧轴*/
}
divspan{
width:150px;
height:100px;
background:skyblue;
}
</style>
执行结果:(y轴为主轴,内容从上至下依次排列,所以是123)
在这里插入图片描述
column-reverse
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<styletype="text/css">
div{
display:flex;
width:800px;
height:300px;
background-color:orange;
flex-direction:column-reverse;
}
divspan{
width:150px;
height:100px;
background:skyblue;
}
</style>
执行结果:(y轴为主轴,内容从下至上依次排列,所以是321)
作品标签: CSS
优秀作品:
最新作品:
评论列表(共130人参与)参与讨论或分享设计作品获得视觉癖积分奖励
你们共享的注册会员
2021-08-12 14:28:18
见。编制包括:消息、简讯等。软性新闻也称为讲故事新闻,选取某一视角向读者展示人物、事情、问题、供给教育性或者娱乐性的信息,重在传递某种思维观念,引导读者、影视后期合成技能、游戏策划与制造、计算机制造等。
回复HTML注册会员
2021-08-12 7:2:36
n 1 [C游客
2021-08-12 11:32:12
游客74001:flex-direction属 标签是HTML5新增的标签,界说衡量衡。仅用于已知最大和最小值的衡量。也便是必须界说衡量的规模,既能够在元素的文本中,也能够在min/max特点中界说。 5om/ 链接:http://www.fleeangrybear.com/ 链接:https:
回复视艺术概注册会员
2021-08-12 0:6:14
lex布局后,子元素的float、clear和vertical-align属性将失效。 /allimg/210803/1-210P31PZ2.jpg" style="height: 178px; width: 400px;" />
回复