CSS flex布局-优快云博客

本文链接：https://blog.youkuaiyun.com/Jason_Nevermind/article/details/120493238

本文介绍了一段关于Flex布局的HTML代码，展示了如何使用`justify-content`属性来调整容器中项目的对齐方式，包括左对齐、右对齐、居中、均匀分布和两端对齐。此外，还提到了其他CSS属性如`align-items`和`flex-direction`，用于控制项目在主轴和交叉轴上的排列和方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>Document</title>
    <style>
        .container{
            display: flex;
            /* justify-content: flex-start; 靠主轴(左)对其*/
            /* justify-content: flex-end; 靠右对其*/
            /* justify-content: center; 主轴中间对其*/
            /* justify-content: space-around; 项目以间距分隔左右对其 */
            /* justify-content: space-between; 项目间距为左右项目到容器间距2倍*/
            /* justify-content: space-evenly; 项目间距为左右项目到容器间距*/

            /* align-items: flex-start; 项目靠纵轴对其  */
            /* justify-content: center; align-items: center; 项目居中 */
            
            /* flex-direction: column; 项目排列方向*/
            /* flex-direction: column-reverse; */
            /* flex-direction: row-reverse; */

            /* flex-wrap: nowrap; 项目不换行*/
            /* flex-wrap: wrap; 项目换行*/
        }
        .box1{
            background-color: red;
            /* order: 0; 数值越小排列越靠前*/

            /* align-self: center; 设置单个项目居中*/

            /* flex: 0 1 auto; */
            /* flex: auto; (1 1 auto)项目等分放大缩小*/
            /* flex: none; (0 0 auto)项目不放大等分缩小*/
            /* flex-grow: 1; 决定项目空间剩余时是否放大,默认0不放大*/
            /* flex-shrink: 1; 决定项目空间不足时是否缩小,默认1等比缩小*/
            /* flex-basis: auto; 设置项目宽度，默认auto为width*/
        }
        .box2{
            background-color: yellow;
        }
        .box3{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>