displayl:flex布局
1.1 flex-direction:
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
1.2 flex-wrap:
nowrap(默认):不换行。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。
1.3 justify-content:
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
1.4 align-items:
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
1.5 align-content:
定义了多根轴线的对齐方式,如果项目只有一根轴线,那么该属性将不起作用
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
displayl:flex布局相关推荐
- Flex 布局详解 - 转自阮一峰老师
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何的盒子都可以使用它. 下面我们来看一下使用 Flex 布局的容器的属性 fle ...
- Flex布局教程(来源:阮一峰)
网页布局(layout)是 CSS 的一个重点应用.Flex 布局将成为未来布局的首选方案.本文介绍它的语法,下一篇文章给出常见布局的 Flex 写法.网友 JailBreak 为本文的所有示例制作了 ...
- Flex 布局:语法篇
2019独角兽企业重金招聘Python工程师标准>>> 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position 属性 + float 属性.它对于那些特殊 ...
- 通过游戏来学习CSS的Flex布局
在复习Flex 布局的时候发现的了几个有趣的小游戏,在这里分享并记录几个有难度的答案 1. Flexbox Froggy 通过调整CSS样式来使各种青蛙回到对应的荷叶上,游戏默认难度为Beginner ...
- CSS布局之flex布局
最近项目中涉及到手机端开发,那么flex布局是必不可少的,这里我来重新梳理一下 1. 介绍 flex布局也被成为伸缩盒布局,在flex布局模型中,flex容器的子元素可以在x轴或y轴上进行布局,并且子 ...
- flex布局和单行省略不兼容
2019独角兽企业重金招聘Python工程师标准>>> flex布局和单行省略不兼容,存在着无法公用的特性,可以将flex修改为: display: box; display: -w ...
- flex布局的盒子模型
flex盒子模型由容器(flex container)以及容器的直接子元素(flex item)组成. 以容器(flex container)定义,有主轴(main axis)以及交叉轴(cross ...
- 浅谈CSS3中display属性的Flex布局,关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念 采用Fl ...
- CSS 7:网页布局(传统布局,flex布局,布局套路)
传统布局 一栏.两栏.三栏布局 一栏布局 特点:页面内容居中,宽度固定 实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-lef ...
最新文章
- 学习资源:在线学习 Python(二)
- 用户体验——减少用户的操作!
- 转载 linux内核 asmlinkage宏
- 怎样调整vim分屏窗口的宽度和高度?
- 7、C语言 —— 字符串常用处理函数
- Android开发笔记(一百四十六)仿支付宝的支付密码输入框
- iOS-获取通讯录信息
- 乐观锁 与 悲观锁 来解决数据库并发问题
- MySQL下载安装教程及Navicat安装教程
- java开源物联网智能家居系统
- Linux系统编程思维导图:基础指令,常用工具,进程,基础IO,IPC,线程;思维导图因为图片过大所以放了链接,需要的可以下载
- 如何写软件概要设计?
- 向量设计丨导师简介丨客户案例丨商业活动丨跨界合作
- 布尔逻辑代数化简公式
- spotlight搜索失效_如何在OS X的Spotlight中使用自然语言搜索
- 微型计算机数码管显示实验,微机原理实验八段数码管显示.doc
- 北京思想聚合科技有限公司
- js海报制作操作步骤缓存思路求解?
- PAT难题精选题汇总,代码保存下来以供自己学习
- finally块的正确使用
热门文章
- 在公司三年跌宕起伏的经历
- 拓扑结构和几何结构的区别
- 【文件夹访问被拒绝】删文件夹的时候遇到“你需要权限来执行此操作 你需要来自 我的本\Administrator 的权限才能对此文件夹进行更改”
- Zotero安装和使用
- SpringBoot+阿里云短信服务实现发送短信验证码功能
- Shell---函数
- Scrum立会报告+燃尽图(十月十日总第一次):选题
- 图神经网络 | (8)图注意力网络(GAT)
- 博图中热电阻/热电偶(RTD/TC)模拟量信号的处理
- java单例模式构造器初始化_秒懂java单例模式,java私有构造器与一夫一妻制