代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding: 0px;margin: 0px;}
ul
{
list-style: none;
width: 600px;
border: 1px solid red;
margin: 100px auto;
display: flex;
}
ul>li
{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
background: red;
}
ul>li:nth-child(2)
{
background: green;
}
ul>li:nth-child(3)
{
background: blue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*默认情况下,主轴是水平方向的,默认是从左到右的排列的.
但是可以通过属性来修改.
flex-direction
属性值有:;
row:默认的,从左到右的排列;
row-reverse:与row相反的,起点在右边,终点在左边 从右至左的排版;
column:起点在顶部,终点在底部从上至下的排版;
column-reverse:相反的,起点在底部,终点在顶部,从下至上的排版;
*/
*{padding: 0px;margin: 0px;}
ul
{
list-style: none;
width: 600px;
border: 1px solid red;
margin: 100px auto;
display: flex;
flex-direction: column-reverse;
}
ul>li{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
background: red;
}
ul>li:nth-child(2){
background: green;
}
ul>li:nth-child(3){
background: blue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*默认情况下,主轴是水平方向的,默认是从左到右的排列的.
但是可以通过属性来修改.
flex-direction
属性值有:;
row:默认的,从左到右的排列;
row-reverse:与row相反的,起点在右边,终点在左边 从右至左的排版;
column:起点在顶部,终点在底部从上至下的排版;
column-reverse:相反的,起点在底部,终点在顶部,从下至上的排版;
*/
*{padding: 0px;margin: 0px;}
ul
{
list-style: none;
width: 600px;
border: 1px solid red;
margin: 100px auto;
display: flex;
/*justify-content: flex-start; 主轴上伸缩项对齐的默认值
注意点: 在设置对齐方式的时候一定要理解两步操作
1.按照主轴起点对伸缩项进行排版
2.按照指定的对齐方式对齐排版好的伸缩项
*/
flex-direction: row;
/*justify-content: flex-start;/*默认的*/
/* justify-content: flex-end;/*主轴方向是默认的,然后是对齐方式是到end的地方左往右的对齐把.*/
/*justify-content: center;/*左往右,center在中间*/
/*justify-content: space-between;/*是元素与元素的中间有空格.用所有空间的减去所有元素的宽,在除以2就是每一个空格的宽度了*/
justify-content: space-around;/*是开始与结束都有空格,是中间空格的1/2*/
}
ul>li{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
background: red;
}
ul>li:nth-child(2){
background: green;
}
ul>li:nth-child(3){
background: blue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
