html新布局display:flex的常用用法和案例

最新推荐文章于 2024-08-21 12:08:59 发布

学魔学编程

最新推荐文章于 2024-08-21 12:08:59 发布

阅读量1.6k

点赞数

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

本文链接：https://blog.csdn.net/qq_59717525/article/details/121304114

版权

本文探讨了CSS3中`display: flex`布局的使用，包括其在单行和多行布局中的应用。通过实例展示了如何设置元素所占的份数或使用整数和百分比来调整元素的宽度。了解这些技巧，有助于提升网页设计的灵活性。

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

<!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>
        .box1 {
            width: 40%;
            height: 50px;
            background-color: pink;
            margin: 0  auto;
            display: flex;



        }
     .box1 span:nth-child(1){
         width: 60px;
         height: 50px;
         background-color: lawngreen;
     }
     .box1 span:nth-child(2){
        flex: 10;
        display: flex;
         height: 50px;
         flex-direction: column;
         background-color: orange;

     }
     .box1 span:nth-child(2) i:nth-child(1){
        flex: 1;
         height:50px;
         background-color: red;
     }
     .box1 span:nth-child(2) i:nth-child(2){
        flex: 1;
         height:50px;
         background-color: green
     }
     .box1 span:nth-child(3){
         width: 60px;
         height: 50px;
         background-color: purple
     }




     .box2 {
          
            display: flex; 
            /* 默认是沿着x轴排列的 就是row 排列是 1,2,3 */
            flex-direction: row; 
             /* 默认是沿着x轴排列的 就是row-reverse 排列是 3,2,1 */
            flex-direction: row-reverse; 
             /* 默认是沿着y轴排列的 就是column 排列是 1,2,3 */
       
           /* 默认是沿着y轴排列的 就是column 排列是 3,2,1 */
            flex-direction: column-reverse; 
            justify-content: flex-start;
            justify-content: flex-end;
            justify-content: center;
            justify-content: space-around;
            justify-content: