简述弹性盒子flex布局及rem布局

flex布局方式
- 采用flex布局的元素,成为flex为容器,所有的子元素,都包含在容器内,容器存在两个默认的轴
  - 水平主轴
    - 主轴的开始位置(与边框的交叉点)叫做main start结束位置叫做main end
  - 垂直交叉轴
    - 交叉轴的起始位置叫做cross start结束位置叫做cross end
- 常用属性
  - flex-direction(决定主轴的排列方向)
    - row（默认值）：主轴为水平方向，起点在左端。
    - row-reverse：主轴为水平方向，起点在右端。
    - column：主轴为垂直方向，起点在上沿。
    - column-reverse：主轴为垂直方向，起点在下沿。
  - flex-wrap(默认都在一行显示,该属性课实现换行排列)
    - nowrap(默认值): 不换行
    - wrap：换行，第一行在上方
    - wrap-reverse：换行，第一行在下方
  - flex-flow
    - flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
  - justify-content(定义了项目在主轴上的对齐方式)
    - flex-start（默认值）：左对齐
    - flex-end：右对齐
    - center：居中
    - space-between：两端对齐，项目之间的间隔都相等。
    - space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
  - align-items(定义项目在交叉轴上如何对齐)
    - flex-start：交叉轴的起点对齐。
    - flex-end：交叉轴的终点对齐。
    - center：交叉轴的中点对齐。
    - baseline: 项目的第一行文字的基线对齐。
    - stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
  - align-content(定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用)
    - flex-start：与交叉轴的起点对齐。
    - flex-end：与交叉轴的终点对齐。
    - center：与交叉轴的中点对齐。
    - space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
    - space-around：每根轴线两侧的间隔都相等，所以，轴线之间的间隔比轴线与边框的间隔大一倍
    - stretch（默认值）：轴线占满整个交叉轴
rem布局方式
- rem是什么?
  - rem（font size of the root element）是指相对于根元素的字体大小的单位，简单的说它就是一个相对单位,看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位,它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算
- rem布局
  - 原理是，先按定高宽设计出来页面，然后转换为rem单位，配合js查询屏幕大小来改变html的font-size，最终做出所谓的完美自适应
- rem使用场景
  - rem+js是宽度自适应，无法做到高度自适应，所以那些对高度要求很高的rem+js无法实现,改变浏览器宽度，你会发现，页面所有元素的高宽都等比例缩放，也就是大屏幕下导航是横的，小屏幕下还是横的只不过变小了
  - 优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应
  - 缺点：碰到重视高度的设计，或者重视元素间间距的设计，那就玩不开了

简述弹性盒子flex布局及rem布局相关推荐

简述弹性盒子 flex 布局及 rem 布局
rem简介: rem 是 CSS3 新增的一个相对单位,相对于根节点(html)字体大小的值,r 就是 root html{font-size:10px} 则 2rem=20px 通过它就可以做到只修 ...
弹性盒子flex布局实现骰子六个面并让骰子3D空间旋转
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
css 弹性盒子 flex布局
目录 css弹性盒子flex 布局什么是flex 常见父项属性概念与案例主轴与侧轴 flex-direction设置主轴的方向 justify-content 设置主轴上的子元素排列方式 fle ...
html弹性盒子布局,div+css3弹性盒子(flex box)布局
一.CSS3 弹性盒子(Flex Box) 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确 ...
CSS3弹性盒子Flex
CSS3弹性盒子Flex 基础知识和术语原文链接:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 父级(flex容器)的属性 #显示 ...
弹性盒子flex轴的说明
弹性盒子flex中,有两种轴一种是主轴,一种是交叉轴(侧轴). flex默认轴布局是这样的: flex-direction 是决定主轴的方向 row 从左到右水平排列元素(默认值)如上图 row-r ...
弹性盒子 Flex 子元素高度塌陷
弹性盒子 Flex 子元素高度塌陷数据来源:https://blog.csdn.net/sinat_36539161/article/details/81663971 先看看页面整体布局: · wr ...
CSS3 弹性盒子(Flex Box)
目录 CSS3 弹性盒子(Flex Box) 一.什么是 Flexbox >>> 了解两个基本概念,接下来会频繁提到: >>> 了解两个基本方向,这个牵扯到弹性布局 ...
认识弹性盒子flex
认识弹性盒子flex 来源:https://blog.xybin.top/2022/flex 1.定义弹性布局(父级上定义)display:flex; 如果说内核为webkit 的必须前面加上 -we ...

简述弹性盒子flex布局及rem布局

简述弹性盒子flex布局及rem布局

简述弹性盒子flex布局及rem布局相关推荐

最新文章

热门文章