设置display:flex时,默认属性值

算法星河谣
• 阅读 2009

当父盒子设置flex时

<style>
    .box{
      display: flex;
      height: 200px;
      width: 300px;
      border: 1px solid red;
    }
    .box > div{
      width: 30px;
      background-color: pink;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <div class="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
  </div>
</body>

结果

设置display:flex时,默认属性值

默认值

此时呈现如上,因为父盒子默认值如下:

  1. flex-direction: row //定义主轴为从左往右,即起点为左,终点为右,交叉轴为从上往下。
  2. justify-content: flex-start //定义所有子盒子从左往右排列,即从主轴起点到终点。
  3. align-items:stretch //定义所有子盒子沿着交叉轴,即与主轴垂直的轴,撑满 flex 容器。
点赞
收藏
评论区
推荐文章
晴空闲云 晴空闲云
2年前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
梦
4年前
图片放大显示全屏
html代码<divid"outerdiv"style"position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);zindex:2;width:100%;height:100%;display:none;"<divid"innerdiv"style"position:abs
Alex799 Alex799
4年前
Vue进阶(幺柒幺):前端用户体验提升(五)Flex实现弹性布局
需求背景在实现组件拖拽设计过程中,发现组件样式中设置了display:flex属性信息,导致组件生成后无法实现拖拽效果,网上查阅资料后发现Flex布局大有天地。Flex来源
徐小夕 徐小夕
4年前
巧用css圆角实现有点意思的加载动画
作为一名前端工程师,需要对css技巧有充分的研究和了解,接下来笔者将会带大家一起掌握如何用css的圆角属性来实现有点意思的加载动画.如果想学习更多css实用技巧,可以参考笔者以下的文章:<divstyle"display:flex;flexwrap:wrap;alignitems:center;"<ahref"https:/
菜园前端 菜园前端
2年前
想学会flex布局,我强烈推荐你来看看这篇文章!!
原文链接:为什么要使用flex布局?flex布局是目前比较流行的一种布局,因为它十分简单灵活,区区简单几行代码就可以实现各种页面的的布局,以前我在学习页面布局的时候我深受其float、display、position这些属性的困扰。使用flex属性就可以写
Wesley13 Wesley13
3年前
.clear 万能清除浮动
htmlbodydiv.clear,htmlbodyspan.clear{background:none;border:0;clear:both;display:block;float:none;
Wesley13 Wesley13
3年前
CSS 样式注意、常识
padding的值,不能为负数。使用absolute后,在定义好width和height,使用border的width和height会变大、变宽。设置好看的细线 .thinBorder:after{  content:'';  width:100%;  display:block;  
Wesley13 Wesley13
3年前
使用伸缩盒布局创建一个三列布局每一列占用`col
\使用伸缩盒布局创建一个三列布局每一列占用\col{n}\/12份基于父级容器的宽度\Answer设置\.row\类的父级容器为\display:flex;\样式然后使用\flex\缩写形式属性给每一列子元素设置一个\flexgrow\值使得每一列可以按照设置的比例自动协调宽度
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Stella981 Stella981
3年前
Grid布局和Flex布局
Flex布局(弹性布局)Flex是弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。采用Flex布局的元素,称为Flex容器。flexitem项目是Flex布局的元素,简称项目。容器:水平的主轴(mainaxis)和垂直的交叉轴(crossaxis),单个项目占据的主轴空间叫做m
美凌格栋栋酱 美凌格栋栋酱
4个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(