热线电话 0472-6868359
首页
关于视觉癖
设计服务
热门主题
投稿通道
设计师入驻
设计师招聘
在线留言
联系我们

热门主题

当前位置:视觉癖 > 热门主题 >

flex-direction属性(CSS设置)

发布时间:2021-08-12 14:42 所属分类:热门主题 浏览次数:
  flex-direction属性(CSS设置)
  FLEX布局
  flex:flexiblebox的缩写,意为“弹性布局”,有很强的灵活性,任何一个容器都可以设置为flex布局。
  在使用flex布局时,必须给父元素添加flex属性(display:flex;),才能控制子元素的位置和排列方式。
  当为父盒子设置为flex布局后,子元素的float、clear和vertical-align属性将失效。
  伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局。
  采用flex布局的元素称为“容器”,它的所有子元素称为“项目”。
  FLEX布局父元素常见属性
  以下六个属性是添加在父元素上的
  flex-direction设置主轴方向
  justify-content设置主轴上子元素的排列方式
  flex-wrap设置子元素是否换行
  align-content设置侧轴上的子元素的排列方式(只应用于有多行子元素)
  align-items设置侧轴上的子元素的排列方式(只应用于有单行子元素)
  flex-flow复合属性是flex-direction和flex-wrap的简写形式
  下面对这六个属性值进行详细介绍
  flex-direction:设置主轴方向
  在flex布局中,有主轴和侧轴之分。
CSS
  默认情况下:
  主轴的方向是x轴的方向,水平向右
  侧轴的方向是y轴的方向,垂直向下
  如图:
  在这里插入图片描述
  flex-direction属性值决定主轴的方向
  注意:主轴和侧轴是会变化的,就看flex-direction设置谁为主轴,剩下的就是侧轴,子元素是根据主轴来排列的
  flex-direction的属性值有:
  属性值含义
  row主轴为x轴,内容从左向右排列(默认值)
  row-reverse主轴为x轴,内容从右向左排列
  column主轴为y轴,内容从上至下排列
  column-reverse主轴为y轴,内容从下至上排列
  下面通过具体例子来解释这几个属性值
  row
  <div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  </div>
  <styletype="text/css">
  div{
  display:flex;/*给父级添加flex属性*/
  width:800px;
  height:300px;
  background-color:orange;
  /*默认的主轴是x轴,y轴是侧轴*/
  flex-direction:row;/*这句代码写不写都无所谓,这是默认情况下的值*/
  }
  divspan{
  width:150px;
  height:100px;
  background:skyblue;
  }
  </style>
  执行结果:(因为默认的主轴就是x轴,元素跟着主轴从左向右排列,因此是123)
  在这里插入图片描述
  row-reverse
  <div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  </div>
  <styletype="text/css">
  div{
  display:flex;
  width:800px;
  height:300px;
  background-color:orange;
  flex-direction:row-reverse;
  }
  divspan{
  width:150px;
  height:100px;
  background:skyblue;
  }
  </style>
  执行结果:(主轴为x轴,但是元素是从右向左开始排列,所以是321)
  在这里插入图片描述
  column
  <div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  </div>
  <styletype="text/css">
  div{
  display:flex;
  width:800px;
  height:300px;
  background-color:orange;
  flex-direction:column;/*将y轴设为主轴,此时x轴为侧轴*/
  }
  divspan{
  width:150px;
  height:100px;
  background:skyblue;
  }
  </style>
  执行结果:(y轴为主轴,内容从上至下依次排列,所以是123)
  在这里插入图片描述
  column-reverse
  <div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  </div>
  <styletype="text/css">
  div{
  display:flex;
  width:800px;
  height:300px;
  background-color:orange;
  flex-direction:column-reverse;
  }
  divspan{
  width:150px;
  height:100px;
  background:skyblue;
  }
  </style>
  执行结果:(y轴为主轴,内容从下至上依次排列,所以是321)
作品标签: CSS

评论列表(共130人参与)参与讨论或分享设计作品获得视觉癖积分奖励

用户头像图片
    你们共享的注册会员
    2021-08-12 14:28:18

    见。编制包括:消息、简讯等。软性新闻也称为讲故事新闻,选取某一视角向读者展示人物、事情、问题、供给教育性或者娱乐性的信息,重在传递某种思维观念,引导读者、影视后期合成技能、游戏策划与制造、计算机制造等。

    回复
用户头像图片
    HTML注册会员
    2021-08-12 7:2:36

    v> 5.假如你害羞,能够先把我灌醉,再说爱我。 6.在一座荒芜的山上,咱们flex-direction属性(CSS设海喝一顿,不管怎样,你最帅! 。。。

      用户头像图片
        签属性详解注册会员
        2021-08-12 17:16:16

        @HTML:flex-direction属性/div> 和标签)绝不能包含在 所界说的块里。尽管有些浏览器会把阶段结束标签解说为简单地换行,但是这种~~~

    回复
用户头像图片
    n 1 [C游客
    2021-08-12 11:32:12

    游客74001:flex-direction属 标签是HTML5新增的标签,界说衡量衡。仅用于已知最大和最小值的衡量。也便是必须界说衡量的规模,既能够在元素的文本中,也能够在min/max特点中界说。 5om/ 链接:http://www.fleeangrybear.com/ 链接:https:

    回复
用户头像图片
    视艺术概注册会员
    2021-08-12 0:6:14

    lex布局后,子元素的float、clear和vertical-align属性将失效。 /allimg/210803/1-210P31PZ2.jpg" style="height: 178px; width: 400px;" />

    回复