0
点赞
收藏
分享

微信扫一扫

CSS基础7

眼君 2022-03-11 阅读 64
csscss3html

弹性盒子:是一种新布局属性,让元素有能力控制子元素排列

语法:display:flex|inline-flex;
注:变成弹性盒子后,里面项目就有了其他属性,可以在容器里拉伸或收缩,改变排列顺序与方式

容器身上的属性

  1. 设置主轴的方向flex-direction:row|column|row-reverse|column-reverse;
    请添加图片描述

  2. 设置项目在主轴上的排列方式
    justify-content:flex-start|flex-end|center|space-around|space-between|space-evenly均匀分隔
    注:around在盒子之间间隔是盒子与屏幕边框间隔的两倍,between盒子与屏幕边框没间隔间隔全在盒子之间,evenly盒子与屏幕盒子与盒子之间间隔一样
    请添加图片描述

  3. 设置项目是否换行
    flex-wrap:nowrap|wrap|wrap-reverse

  4. 项目在侧轴上的对齐方式
    align-items:stretch拉伸|flex-start|flex-end|center|baseline基线
    注:stretch在项目有高度时候,项目不会有拉伸效果
    注:该属性对应侧轴只有一根轴线

请添加图片描述
5. 设置多根横轴线排列方式
align-content:streth|flex-start|flex-end|center|space-around|space-between|space-evenly;
6. 设置主轴方向和是否换行的复合属性
flex-flow:flex-direction flex-wrap;

项目身上的属性

  1. 项目是否缩小flex-shrink:1;会缩小|0 不缩小
    注:数字缩小值,除以所有项目值,乘以数字
  2. 是否放大flex-grow:1;会放大|0 不放大
    注:设置后项目会自己放大填充多余空间
  3. 项目尺寸flex-basis:auto|*px;
  4. 放缩复合属性flex:flex-grow flex-shrink flex-basis;
    注:flex:1;代表1 1 auto
  5. 项目的排序order:数字;
    注:元素默认值是0;按从小到大排列
  6. 设置项目单独对齐方式align-self:strech拉伸|flex-start|flex-end|center|baseline;
    注:该属性加在项目上,也就是子元素身上
举报

相关推荐

CSS学习7

【CSS】基础

CSS基础

【前端基础】CSS基础

CSS------7.定位

CSS基础之CSS背景

CSS布局基础(CSS浮动)

css基础【1】

0 条评论