您现在的位置是:主页 > 网站制作 > Css|Html >

flex布局

刘清2021-01-09 20:28个人博客人已围观

简介flex-direction:设置主轴的方向 row | column justify-content:设置主轴上子元素排列方式 flex-start flex-end center space-around space-between flex-wrap:设置子元素是否换行 wrap align-content:设置侧轴上子元素排列

flex-direction:设置主轴的方向  row | column

justify-content:设置主轴上子元素排列方式
flex-start
flex-end
center
space-around
space-between


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

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

flex-start
flex-end
center
space-around
space-between
stretch 设置子项元素高度平分父元素高度

align-items:
设置侧轴上子元素排列方式(单行)
flex-start
flex-end
center
stretch 拉伸
flex-flow:复合属性,相当于同时设定flex-direction和flex-wrap



flex布局子项常见属性

flex子项占的分数  与 百分比形式
align-self控制子项自己在侧轴的排序方式
oder定义子项的排序顺序(前后排序)

 
 
       
section div:nth-child(2) {
 
       flex: 1;
       background-color: green;
 }

Tags:

很赞额!(74)

上一篇:jq常用方法

下一篇:WEP API常用操作

文章评论

站点信息

  • 建站时间:2018-12-1
  • 网站程序:织梦cms
  • 主题模板《今夕何夕》
  • 文章统计:299条
  • 文章评论:490条
  • 统计数据百度统计