Flex布局

怎么设置flex布局

Flex翻译为“弹性”,通过给元素设置display属性,属性值为flex或者inline-flex。使其变成弹性容

器,容器中的直系子元素就会变为弹性元素。

   div{

                display: flex;//变成弹性盒

         }

 弹性盒子可以直接控制子元素的位置

布局父项常见属性

flex-direction:设置主轴的方向 

justify-content:设置主轴上的子元素排列方式 

flex-wrap:设置子元素是否换行 

align-content:设置侧轴上的子元素的排列方式(多行) 

align-items:设置侧轴上的子元素排列方式(单行) 

flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap

布局子项常见属性

flex子项目占的份数

align-self控制子项自己在侧轴的排列方式

order属性定义子项的排序顺序(前后顺序) 

rem文字适配

rem是一个相对于根元素字体大小的单位.

   html{

               font-size: 12px;//根元素字体大小为12px

          }
   p{

               font-size: 2rem;//p元素的字体大小为24px

      }

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值