flex_container

最新推荐文章于 2023-05-25 08:44:17 发布

leigangg

最新推荐文章于 2023-05-25 08:44:17 发布

阅读量567

点赞数

本文链接：https://blog.csdn.net/leigangg/article/details/104365222

版权

flex布局的基本认识:
在这里插入图片描述
flex布局属性作用的基本认知:

`

<style>
 div{
     height: 300px;
     width: 650px;
     background-color: #f3f;
     margin: 0 auto;
 }
 .box1,.box2,.box3{
     height: 100px;
     width: 100px;
 }
 .box1{
     background-color: #f00;
 }
 .box2{
     background-color: #00f;
 }
 .box3{
     background-color: #0f0;
 }
 div{
     display: flex;  
     /*  flex-direction:决定主轴的方向
                         row;默认值,从左到右;
                          row-reverse;从右到左;
                           column;从交叉轴的(上到下);
     flex-direction: row-reverse; */
     /* justify-content:决定内容摆放的样式
                         center;居中
                         column:按列排放 */ 
     /* justify-content: center; */
     /* justify-content: space-around; */
     /* justify-content: space-between; */
     /* justify-content: space-evenly;
     justify-content: space-evenly; */
     /* align-items: 决定内容交叉轴轴的排列方式 
                     center;
     */
     /* align-items:决定类容在交叉轴中的对齐方式;
         align-items: baseline;类容的基线对齐;但是值只对齐第一行内容;
                   flex-end;在交叉中的end对齐;
                 flex-start;在交叉轴的start对齐;
                 center;在交叉轴的center(中心点对齐)
                 align-items: flex-start;
     */
     /* 结论:默认情况在,所有的flex-items都会在同一行显示
         flex-wrap: wrap;多行显示
                 默认值是noweap;
                 flex-wrap: wrap-reverse;反转,
                 flex-wrap:wrap;
     */
     /* flex-flow: row wrap;缩写属性:flex-direction和flext-wrap
     */
     flex-flow: row-reverse wrap;
     /*等分主轴中间的间隔 */
     justify-content: space-evenly;
     /* align-content:决定多行内容在交叉轴上的排列方式 */
     align-content: flex-start;
 }

<body>
    <div>
        <div class="box1">xiaobox1</div>
        <div class="box2">xiaobox2</div>
        <div class="box3">xiaobox3</div>
        <div class="box1">xiaobox4</div>
        <div class="box2">xiaobox5</div>
        <div class="box3">xiaobox6</div>
        <div class="box1">xiaobox7</div>
        <div class="box2">xiaobox8</div>
        <div class="box3">xiaobox9</div>
        <div class="box1">xiaobox10</div>
        <div class="box2">xiaobox11</div>
        <div class="box3">xiaobox12</div>
    </div>

leigangg

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
flex_container

`<style> div{ height: 300px; width: 650px; background-color: #f3f; margin: 0 auto; } .box1,.box2,.box3{ height: 100px; width: 100px; } .box1{ backgroun...
复制链接

扫一扫