您的位置:首页 - 文章 - 前端 - 正文

css display:flex 属性

首先说明我是一个偏后端的开发工程师,但是由于种种原因,目前做的都是一些前端的活,我只想说说一句:我太难了,哈哈!
废话不多说直接上代码吧:
1、首先写div 父子排布

<div class="content">
            <div class="item">
                A
            </div>
            <div class="item">
                B
            </div>
            <div class="item">
                C
            </div>
            <div class="item">
                D
            </div>
 </div>

2、写style样式

<style>
            .content {
                /*
                 A:display
                    flex 将对象作为弹性伸缩盒显示 宽度100%
                    inline-flex :将对象作为内联块级弹性伸缩盒显示
                 */
                background-color: #0f0;
                display: inline-flex;
                flex-wrap:wrap
                /*父div设置该属性*/
                /*
                B:flex-direction
                    默认:flex-direction:row
                    横向排列从左到右: row
                    竖向排列从上到下: column
                    横向排列从右到左: row-reverse
                */
                /*
                C:flex-wrap
                    默认:flex-wrap:nowrap
                    不换行:nowrap
                    换行:wrap
                 */
                /*
                 D:对齐方式
                 justify-content
                 默认:justify-content : flex-start;
                 水平居中:center
                 左对齐:flex-start
                 右对齐:flex-end
                 左右对齐:space-between
                 分散对齐:space-around
                 按上边距左对齐 align-items : flex-start;
                 按下边距左对齐 align-items : center;
                 按中轴线对齐 align-items : flex-end;
                 */
            }
            .item:nth-child(2n-1) {
                /* flex-grow: 3; */
                background-color: blueviolet;
                width: 300px;
            }
            .item:nth-child(2n) {
                /* flex-grow: 1; */
                width: 600px;
                background-color: red;
            }
        </style>

上面我注释写的横清楚,主要是用来自己记录,如果看不懂可以自行百度一下

本文原创,作者:西决,其版权均为品创网络所有。如需转载,请注明出处:https://www.sxpcwlkj.com/css-displayflex/

发表评论