flex 我所理解不够深刻的内容
1.align-items属性 父元素
align-items
属性定义项目在交叉轴上如何对齐。
flex-start
:交叉轴的起点对齐。flex-end
:交叉轴的终点对齐。center
:交叉轴的中点对齐。baseline
: 项目的第一行文字的基线对齐。stretch
(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
2.align-content属性 父元素
align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
flex-start
:与交叉轴的起点对齐。flex-end
:与交叉轴的终点对齐。center
:与交叉轴的中点对齐。space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch
(默认值):轴线占满整个交叉轴。.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
3.order属性 子元素
order
属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
.item {
order: <integer>;
}
4.align-self属性 子元素
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
该属性可能取6个值,除了auto,其他都与align-items属性完全一致
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
flex 我所理解不够深刻的内容的更多相关文章
- MySQL实验1: 新建一个名为 library 的数据库,包含 book、reader 两张表,根据自己的理解安排表的内容并插入数据。
数据表(table)简称表,它是数据库最重要的组成部分之一.数据库只是一个框架,表才是实质内容. 实验: 新建一个名为 library的数据库,包含 book.reader两张表,根据自己的理解安排表 ...
- 关于flex的布局理解
flex布局是一种新的布局方式也就是弹性盒子:在布局上更加方便,但是要注意的是在flex布局中float.position是无效的. 图片来自阮一峰的博客 .下面我们进入正题: flex布局分为分为主 ...
- 【转载】CSS flex属性深入理解
文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:https://www.zhangxinxu.com/wordpress/2019/12/css-f ...
- 深入理解javascript描述元素内容的5个属性
× 目录 [1]innerHTML [2]outerHTML [3]innerText[4]outerText[5]textContent 前面的话 <p>This is a <i& ...
- 有关CLR的初学小整理2(可能理解不深刻,望大牛指出)
针对原文有用的段落,写一写自己的理解,注释: 1. 托管exe文件被启动的时候,首先被PE Loader载入.PE Loader载入exe文件之后,会分析PE文件头的data directory ta ...
- 有关CLR的初学小整理(可能理解不深刻,望大牛指出)
1. .Net程序通过CLR去加载运行管理代码, 加载CLR的进程成为“宿主”,通常操作系统加载. 加载CLR的进程也可以为某个DLL,也成为“宿主” 2. 宿主接口使宿主能够对运行库的更多方面进行控 ...
- threadlocal彻底理解,深刻
本文转自http://blog.csdn.net/huachao1001/article/details/51970237 ThreadLocal的使用相信大家都比较熟悉,但是ThreadLocal内 ...
- 伸缩容器-display:flex设置flex属性的理解
1.flex属性 1.1 flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto. flex-grow: 定义项目的放大比例,默认为0,即 ...
- 如何仅用递归函数和栈操作逆序一个栈——你要先用stack实现,再去改成递归——需要对递归理解很深刻才能写出来
/** * 如何仅用递归函数和栈操作逆序一个栈 * 题目: * 一个栈依次压入1,2,3,4,5,那么从栈顶到栈底分别为5,4,3,2,1. * 将这个栈转置后,从栈顶到栈底为1,2,3,4,5,也就 ...
随机推荐
- GO 语言入门(一)
GO 语言入门(一) 本文写于 2020 年 1 月 18 日 Go 由 Google 工程师 Robert Griesemer,Rob Pike 和 Ken Thompson 设计的一门编程语言,第 ...
- 项目:Six Sigma
六西格玛管理(Six Sigma Management)是20世纪80年代末首先在美国摩托罗拉公司发展起来的一种新型管理方式.推行六西格玛管理就是通过设计和监控过程,将可能的失误减少到最低限度,从而使 ...
- leetcode 3. Longest Substring Without Repeating Characters 无重复字符的最长子串
一.题目大意 https://leetcode.cn/problems/longest-substring-without-repeating-characters/ 给定一个字符串 s ,请你找出其 ...
- Cocos---大作业:简单H5小游戏
Cocos大作业:传统美食分分类 知识点清单: 场景切换,监听时间,碰撞组件及回调,拖动角色移动,分数记录,随机数和定时器,背景音乐控制,资源池控制,预制体,进度条... 源码+q:143144832 ...
- 架构师必备:HBase行键设计与应用
首先要回答一个问题,为何要使用HBase? 随着业务不断发展.数据量不断增大,MySQL数据库存在这些问题: MySQL支持的数据量为TB级,不能一直保留历史数据.而HBase支持的数据量为PB级,适 ...
- 对TCP粘包拆包的理解
TCP的粘包与拆包 TCP是一种字节流(byte-stream)协议,所谓流,就是没有界限的一串数据. 一个完整的包会被TCP拆为多个包进行发送,也有可能把多个小包封装成一个大的数据包发送,这就是所谓 ...
- 6. Docker-compose配置Dockerfile使用
Docker-compose实际是管理基于一个镜像启动的容器的. 使用docker-compose.yml文件以及Dockerfile文件在生成自定义镜像的同时启动当前镜像,并且由docker-com ...
- 2020.10.24【普及组】模拟赛C组 总结
T1:暴力 1:先从 6 个中选三个,再把选出的三个全排列,全排列后再判断是否可行 2:把 6 个全都全排列,然后判断 T2:判断误差 1:减法时结果加上 1e-8 2:把小数乘上 1e6 左右 考试 ...
- IE让我首次遭受了社会的毒打
2022年6月15日,微软终止对IE的支持,自此IE走入历史,可以说这是一个时代的终结. 自己在 2011 年刚从业时,IE 在国内的市场占有率可是遥遥领先的,下图来自于 StatCounter 网站 ...
- linux-python安装pip
wget https://bootstrap.pypa.io/get-pip.py --no-check-certificate sudo python3 get-pip.py linux 建立软连接 ...