flex

作者: 冰点雨 | 来源:发表于2022-09-30 12:49 被阅读0次

CSS基础记录
flex布局 flex， flex-grow，flex-shri
Flex 容器布局
flex 的三个参数 flex:1 0 auto
flex布局的伸缩规则
2018-10-10
flex 布局教程笔记
CSS相关
css3属性
史上最全flex兼容写法整理

display：
flex 设置块级元素
inline-flex 设置行内元素

弹性容器样式

flex-direction: row;弹性方向
flex-wrap: wrap;设置是否换行
nowrap 默认，不换行
wrap 换行
wrap-reverse 换行反向
justify-content父元素比子元素大时，如何分配主轴上的空间
flex-start 开始位置
flex-end 结束位置
center 居中（不留缝隙）
space-evenly 空白分布到元素单侧
space-betwee 空白分布到元素间
space-around 空白分布到元素两侧
align-items副轴分布
stretch 默认值
flex-start 开始位置对齐
flex-end 结束位置对齐
center 居中对齐
baseline 基线对齐
align-content 设置空白分布，同justify-content
align-self 覆盖 align-items的值

1.png

<!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>弹性容器样式</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 600px;
            height: 500px;
            border: 10px solid red;
            display: flex;
            /*flex-flow   flex-direction和flex-wrap的简写*/
            flex-flow: row wrap;
            justify-content: center;
            align-items: flex-end;
            align-content: space-between;
        }

        li{
            width: 200px;
            /* height: 100px; */
            background-color: aquamarine;
            font-size: 30px;
            text-align: center;
             flex-shrink: 0;
        }


        li:first-child{
            background-color: orange;
            /* 覆盖 align-items的值*/
            align-self: stretch;
        }
        li:last-child{
            background-color: magenta;
        }

        li:nth-child(3){
            background-color: yellow;
        }

        li:nth-child(4){
            background-color: silver;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2
            <div>2</div>
        </li>
        <li>3
            <div>3</div>
            <div>3</div>
        </li>
        <li>4
            <div>4</div>
        </li>
        <li>5
            <div>5</div>
            <div>5</div>
        </li>
     </ul>
</body>
</html>

弹性元素样式

/* 伸展系数 /
/ flex-grow: 0; /
/ 收缩系数 /
/ flex-shrink: 0; /
/元素在主轴上的基础长度
横向：指宽度
纵向：指高度
默认值是auto,参考元素自身的宽度高度
/
/ flex-basis: auto; /
/ flex:伸展缩减基础
initial: 0 1 auto
auto: 1 1 auto
none:0 0 auto 元素没有弹力
/
/ order 弹性元素排列顺序 */
order: 3;