C3之弹性盒子

最新推荐文章于 2023-10-15 15:01:23 发布

23号婷儿

最新推荐文章于 2023-10-15 15:01:23 发布

阅读量1k

点赞数

分类专栏： css3 文章标签： css css3

本文链接：https://blog.csdn.net/qq_46179838/article/details/110006862

版权

本文详细介绍了CSS3中的弹性盒子模型，包括设置到父元素的属性如flex-direction、flex-wrap、justify-content和align-items，以及设置到子元素的属性如order、align-self、flex-grow和flex-shrink。此外，还探讨了flex-basis与width的关系，以及在不同场景下的应用，如动态导航栏、等分布局、固定宽度布局和圣杯布局。

摘要由CSDN通过智能技术生成

flex盒子

- 常用属性

常用属性

一、设置到父元素的属性（主轴和交叉轴）

1、flex-direction : row（默认值） | row-reverse | column | column-reverse

取值

row：横向从左向右的排列（左对齐）
row-reverse：与row相反
column：纵向从上到下排列（顶对齐）
column-reverse：与column相反

具体效果请往下看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=.0">
    <title>flex弹性盒子</title>    
    <style>
        *{
                 
            padding:0px;
            margin:0px;
        }
        .wrapper{
     
            width:500px;
            height:500px;
            border:1px solid black;
            display: flex;
            flex-direction:row;
            /* row | row-reverse | column | column-reverse */
        }
        .content{
     
            width:100px;
            height:100px;
            border:1px solid #00ffff;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2<