前端 flex 笔记重要内容-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_79895666/article/details/139890524

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>flex容器</title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
           .bigbox{
               display: flex; /* 把父盒子设置为flex容器 */
               /* 改变主轴 */
               flex-direction: row;
               /* row:水平，从左往右，默认值
               row-reverse:从右往左
               column：垂直，从上往下
               column-reverse:垂直，从下往上

               */
               /* 换行
               nowrap:不换行
               wrap:换行
               wrap-reverse:反转换行，下面的跑到上面了
               */
               /* flex-wrap: wrap; */
               flex-flow: row wrap;/* 复合写法 */
               /* 决定项目在主轴的排列方式:
               flex-start;沿开始位置对齐,默认值
               flex-end:沿主轴的结束位置对齐
               center:居中
               space-between:两端对齐，中间有间距
               space-aroud:环绕对齐
               */
               justify-content: space-between;
               /* 决定项目在交叉轴上的对齐方式
               flex-start:在交叉轴的开始位置
               flex-end:在交叉轴的结束位置
               center:居中
               */
               align-items: center;
               /* 多条轴线的对齐方式
               flex-start:沿交叉轴的开始位置对齐
               flex-end:沿交叉轴的结束位置对齐
               center:交叉轴上居中对齐，沿交叉轴的中间位置对齐
               space-between:沿交叉轴的两端对齐
               space-around:在交叉轴上环绕对齐
               */
               /* align-content:space-around; */
               width: 700px;
               height: 700px;
               border: 1px solid black;
               margin: auto;
           }
           .bigbox div{
               width: 200px;
               height: 300px;
               border: 1px solid red;
               font-size: 36px;
               text-align: center;
               line-height: 300px;
           }
       </style>
   </head>
   <body>
       <div class="bigbox">
           <div>1</div>
           <div>2</div>
           <div>3</div>
           <div>4</div>
           <div>5</div>
           <div>6</div>
       </div>
   </body>
</html>