CSS--display（flex重点）

最新推荐文章于 2024-05-21 19:43:55 发布

JayScofield

最新推荐文章于 2024-05-21 19:43:55 发布

阅读量2.5k

点赞数

分类专栏： CSS 文章标签： flex

本文链接：https://blog.csdn.net/sinat_36768524/article/details/56674322

版权

display

首先得写写flex——-弹性布局

flex

div{
   display:flex;}

设置了flex后

子元素行内元素支持宽高了
子元素的clear,float,vertical-align失效

详细的在阮一峰大神的博客上都有，这里附上一些不太清楚的：

flew-grow的计算方法

当容器有多余空间的时候，室友flew-grow才有用
flew-grow是介于0-1的数字，默认是0，原大小

下面这个例子，.div2的width=剩余width*flex-grow+设置宽度=（700-500）*0.1+100=120px

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
     .bg{
    display:flex;flex-flow:row wrap-reverse;width: 700px;}  
    .div1{
    height: 100px; width: 100px;background: lightblue;}
    .div2{
    height: 100px; width: 100px;background: lightyellow;flex-grow:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

JayScofield

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS--display（flex重点）

display首先得写写flex——-弹性布局flexdiv{display:flex;}设置了flex后子元素行内元素支持宽高了子元素的clear,float,vertical-align失效详细的在阮一峰大神的博客上都有，这里附上一些不太清楚的：flew-grow的计算方法当容器有多余空间的时候，室友flew-grow才有用flew-grow是介于0-1的数字，默认是0，原大小下面这
复制链接

扫一扫