flex布局(一) : container和items

flex布局(一) : container和items

案列演示

在这里插入图片描述

<style>
.container{
    width: 500px;
    height: 200px;
    /* 父元素container设置display开启flex布局 */
    display: flex;
    border: 1px solid #000;
}
.item{
    /* 子元素container设置width、height、color等具体样式 */
    width: 100px;
    height: 100px;
    background: #22A6F1;
    margin: 10px;
}
</style>

<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
</body>

1.flex布局的container和item

  • 开启flex布局的父元素叫flex container
  • 在父元素容器下的子元素叫flex item
  • 在父元素container设置display:flex / inline-flex开启flex布局
  • flex和inline-flex区别在于,设置inline-flex时父元素container以inline行内元素存在
    正常开发时多数情况使用display:flex
  • 父元素container用来控制子元素item位置排列方式
    在子元素item设置width、height、color、fontsize等具体内容样式

2.flex布局的主轴main axis和交叉轴cross axis

在这里插入图片描述
主轴和交叉轴既可以是水平方向也是可以是垂直方向的,
flex-direction : row设置主轴main为水平方向
flex-direction : column设置主轴main为垂直方向,交叉轴则总是与主轴相反
大多数情况,我们通常设置主轴为水平,交叉轴为垂直

3.container和item上的相关属性

  • 应用在flex container上的css属性

    • flex-direction :设置主轴方向为水平/垂直
      • row
      • row-reverse
      • column
      • column-reverse
    • justify-content :设置item在主轴main上的对齐方式
      • flex-start
      • flex-center
      • flex-end
      • space-between
      • space-evently
      • space-around
    • aligh-items :设置item在交叉轴cross上的对齐方式
      • stretch
      • baseline
      • flex-start
      • center
      • flex-end
    • flex-wrap :设置items的多行显示
      • nowrap
      • wrap
      • wrap-reverse
    • flex-flow :flex-wrap和flex-direction的组合缩写属性
      • flex-direction || flex-wrap
    • align-content :设置行与行之间在交叉上的对齐方式,只用在多行显示
      • stretch(默认)
      • flex-start
      • flex-center
      • flex-end
      • space-between
      • space-evently
      • space-around
  • 应用在子元素flex item上的css属性

    • order :决定item的排列顺序
    • align-self :决定单个item在交叉轴的对齐方式,会覆盖align-items
    • flex-grow :决定item的扩展规律
    • flex-shrink :决定item的收缩规律
    • flex-basis :设置item在主轴上的大小,优先级顺序 max/min-width/height > flex-basis > width/height > 内容本身大小
    • flex :复合属性 flex-grow || flex-shrink || flex-basis

以上这些属性有些是可以作为组合属性,虽然属性很多但是在实际开发中一般不会全部使用。只需要挑几个需要的或者使用频率高的属性即可

发布了5 篇原创文章 · 获赞 6 · 访问量 426
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览