<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局基本属性</title>
<style>
html,
body{
margin: 0;
padding: 0;
}
span{
font-weight: 600;
}
p{
padding-left: 32px;
margin-top: 0;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>display:flex</h1>
<hr/>
<h6>flex-direction / flex-wrap / flex-flow / justify-content / align-items / align-content</h6>
<div>
<span>flex-direction:主轴方向</span>
<p>
row 默认值从左到右<br>
row-reverse 从右到左<br>
column 从上到下<br>
column-reverse 从下到上
</p>
<span>flex-wrap:主轴方向溢出是否换行</span>
<p>
nowrap 默认值,不换行<br>
wrap 换行
</p>
<span>flex-flow：flex-direction和flex-wrap缩写</span>
<p></p>
<span>justify-content:主轴对齐方式</span>
<p>
flex-start 默认值从头部开始如果主轴是x轴，则从左到右<br>
flex-end 从尾部开始排列<br>
center 在主轴居中对齐〔如果主轴是x轴则水平居中)<br>
space-around 平分剩余空间<br>
space-between 先两边贴边再平分剩余空间(重要)
</p>
<span>align-items:交叉轴对齐方式(该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单项的时候使用)</span>
<p>
flex-start 默认值从上到下<br>
flex-end 从下到上<br>
center 挤在一起居中(垂直居中)<br>
stretch 拉伸
</p>
<span>align-content:交叉轴上对齐方式（设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行），在单行下是没有效果的。）</span>
<p>
flex-start 默认值从头部开始如果主轴是x轴，则从左到右<br>
flex-end 从尾部开始排列<br>
center 在主轴居中对齐(如果主轴是x轴则水平居中)<br>
space-around 平分剩余空间<br>
space-between 先两边贴边再平分剩余空间(重要)
</p>
<span>flex：定义子项分配剩余空间</span>
<p>
flex-grow:放大比例<br>
flex-shrink:缩小比例<br>
flex-basis:定义最小空间<br>
flex:为以上三项缩写，默认值为0 1 auto，后两项可省略
</p>
</div>
</body>
</html>
扫一扫
443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
