flex布局父元素上设定display:flex常用指令父元素指令flex-direction:row;布局横向排列ju

父元素上设定display:flex

常用指令

父元素指令
flex-direction: row; 布局横向排列
justify-content: center; 整体项目主轴布局方式
align-items: center; 整体项目侧轴布局方式
flex-wrap: wrap 分布支持换行(默认不写为flex-wrap: nowrap)
子元素指令
order:1~ 子元素排序(数字越小越靠前,默认为0 支持负数)
aglin-self 单独子元素侧轴分布方式

代码展示

body {
           display: flex;
           height: 600px;
           background: greenyellow;
           flex-direction: row;
           justify-content: center;
           align-items: center;
       }

       .c3 {
           width: 200px;
           height: 100px;
           background: red;
       }

       .c1 {
           flex: 1;
           height: 100px;
           background: blue;
       }

       .c2 {
           flex: 2;
           height: 100px;
           background: seagreen;
       }
   </style>
</head>

<body>
   <div class="child c1">1</div>
   <div class="child c2">2</div>
   <div class="child c3">3</div>
</body>