弹性盒子布局 flex

最新推荐文章于 2024-07-12 16:38:52 发布

SpringYoungYu

最新推荐文章于 2024-07-12 16:38:52 发布

阅读量240

点赞数

文章标签： css flex

本文链接：https://blog.csdn.net/qq_44917015/article/details/110311157

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .con{
            display: flex;
            height: 200px;
            width: 500px;
            /* flex-direction: column; */
            /* flex-direction: column-reverse; */
            /* flex-direction: row-reverse; */
            /* justify-content: space-around; */
            /* 子元素在弹性盒子中 主轴的对齐方式 */
            /* justify-content: center; */
            /* 弹性盒子最开始的地方 */
            /* justify-content: flex-start; */
            /* 弹性盒子的末端 */
            /* justify-content: flex-end; */
            /* 两端对齐中间自由分配 */
            justify-content: space-between;
            /* 完全自动分配空间 */
            /* justify-content: flex-start; */
            align-items: stretch;
            /* align-items: flex-start; */
            /* align-items: flex-end; */
            /* align-items: center; */
            flex-wrap: wrap;
            /* flex-wrap: nowrap; */
            /* flex-wrap: wrap-reverse; */
            /* align-content: space-around; */
            /* align-content: stretch;*/ /* 默认值 */

        }
        div{
            border: 1px solid;

            /* margin: auto; */
            width: 100px;
            /* height: 200px; */
            
        }
    </style>
    <section class="con">
        <div>1</div>
        <div>12</div>
        <div>123</div>
        <div>1234</div>
        <div>12345</div>
        <div>123456</div>
        <div>1234567</div>
        <div>12345678</div>
    </section>
    <!-- 
        标准盒模型
            border长在元素宽高之外 padding会把盒子撑大
        怪异盒模型
            border和padding 都是长在元素宽高之内的
        
        标准盒模型 box-sizing:content-box; 默认值
        怪异盒模型 box-sizing:border-box
     -->
     <!-- 

        弹性盒模型
            作用用于控制子元素的布局方式
            显示规则
                所有的子元素都会在主轴上进行排列
            主轴 侧轴   
                主轴和侧轴相对而言
        display:flex 形成弹性盒子
            弹性盒子 子元素默认的排列状态
                因为弹性盒子默认为x轴为主轴 所有的子元素
                都默认横向排列
            如果父元素是弹性盒子 子元素都能设置宽高
            如果父元素是弹性盒子 让子元素居中 只需要给子元素
            添加 margin:auto;
        改变主轴的排列方式 （指定主轴）
            flex-direction:
                属性值：
                    row x轴为主轴
                    row-reverse
                    column y轴为主轴
                    column-reverse 
        子元素在弹性盒子里面 主轴的对齐方式
            justify-content: 
                flex-start          弹性盒子的开始的地方。
                flex-end            弹性盒子的末端
                center              居中
                space-between       两端对齐中间自动分配
                space-around        完全自动分配空间
        侧轴的对齐方式
            align-items:
                flex-start
                flex-end
                center
                baseline （ 默认和flex-start等效 ）
                stretch (默认值 =》 拉伸)
        控制子元素在弹性盒子中是否换行
            flex-wrap:
                nowrap 不换行
                wrap 换行
                wrap-reverse 反向换行
        控制行与行之间的对齐方式 需要换行 多行才会生效
            align-content:
                flex-start
                flex-end
                center
                space-between
                space-around
                stretch 拉伸
            【注】默认情况下 align-content 在侧轴执行样式
            的时候 会把默认的间距合并
            对于单行子元素 也就是不换的子元素 该元素不起作用
            因为这是用于处理行和行之间的对齐方式
        flex-flow 属性是flex-direction 和 flex-wrap 
        属性的简写形式 默认值 为 row nowrap
        主轴为x 默认不换行
      -->
</body>
</html>

SpringYoungYu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹性盒子布局 flex

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <style>
复制链接

扫一扫