flex基本原理和属性

css总结 专栏收录该内容
10 篇文章 0 订阅

1、概念

1、弹性盒模型语法基础概念——任何一个容器都可以指定为Flex布局:块(display);行内(inline-flex:依然要加上浏览器前缀) 注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
弹性盒模型就 W3C 官方给到的解释是,这是设计来实现更复杂的版面布局。其本质上就是Box-model的延伸, Box-model定义了一个元素的盒模型,而 Flexbox 更进一步的去规范了这些盒模型之间彼此的相对关系
2、Flexible boxes盒子按照宽高分出一下8点:
水平主轴:main axis;
垂直纵轴:cross axis;
纵轴的开始位置和边框的交点:cross start;
纵轴的结束位置和边框的交点: cross end;
主轴的开始位置和边框的交点:main start;
主轴的结束位置和边框的交点:main end;
单个项目占据主轴的空间距离:main axis;
单个项目占据纵轴的空间距离:cross axis;
在这里插入图片描述

2、弹性盒模型属性设置

1、flex-direction:主轴的方向(项目的排列方向)
row:默认值,主轴为水平方向,起点在左端
row-reverse:主轴为水平方向,起点在右端
column:主轴为垂直方向,起点在上沿
column-reverse:主轴为垂直方向,起点在下沿
在这里插入图片描述2、flex-wrap:一条轴线排列方式
nowrap:默认,不换行。
wrap:换行,第一行在上方
wrap-reversr:换行,第一行在下方
嗯3、flex-flow:规定flex-direction属性和flex-wrap属性
默认值 flex-flow:row,nowrap;
4、justify-content:定义了项目在主轴上的对齐方式
flex-start:默认值,左对齐。
flex-end:右对齐
center:居中
space-between:两端对齐,项目之间的间隔都相等
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
在这里插入图片描述5、align-items:定义项目在交叉轴上如何对齐
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐。
baseline:项目的第一行文字的基线对齐。
stretch:默认值,如果项目未设置高度或设为auto,将沾满整个容器的高度
在这里插入图片描述6、align-content:多根轴线的对齐方式,一根轴该属性无效
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍
stretch:默认值,轴线沾满整个交叉轴
在这里插入图片描述

3、flex=1的含义

让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值