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

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/

发表评论