前端

css display:flex 属性

微信扫一扫,分享到朋友圈

css display:flex 属性
收藏 0 0

首先说明我是一个偏后端的开发工程师,但是由于种种原因,目前做的都是一些前端的活,我只想说说一句:我太难了,哈哈!
废话不多说直接上代码吧:
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>

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

展开阅读全文
干一件事情,用心干就完了
上一篇

如果用SQLyog将数据库中的数据导出为Excel文件

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片

分类目录

微信扫一扫

微信扫一扫