Flex 布局语法教程
flex-wrap属性
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
ps:面试的时候也经常会问到一些
一、Flex布局是什么?
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
.box{display: flex;
}
行内元素也可以使用Flex布局。
.box{display: inline-flex;
}
这里注意Webkit内核的浏览器,必须加上-webkit前缀。
.box{display: -webkit-flex; /* Safari */display: flex;
}
注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
二、基本概念
采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
三、容器的属性
真正实用的东西来了,学起来
以下6个属性设置在容器上。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction属性
.box {flex-direction: row | row-reverse | column | column-reverse;
}
row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿。
flex-wrap属性
.box{flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap(默认):不换行。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。
还有一些,看看这个吧,懒得写,哈哈哈哈哈
Flex 布局语法教程 | 菜鸟教程
Flex 布局语法教程相关推荐
- Bootstrap4+MySQL前后端综合实训-Day01-PM【position定位的四种方式、Flex布局语法教程及案例(概念、容器属性、项目属性)、双飞翼布局复习、Bootstrap4 教程】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记] 目 录 HTML中的三种元素(块元素.内联元素.内联块元素) position定位的四种方式 ...
- flex布局详细教程
flex布局 网页布局(layout)是CSS的一个重点应用. 传统的布局有下面几种. display: block; display: inline; display: list-item; dis ...
- flex 平铺布局_Flex 布局语法教程
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- Flex布局完全教程
背景介绍 Flexbox 布局(也叫Flex布局,弹性盒子布局)模块目标在于提供一个更有效地布局.对齐方式,并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间隙. Flex ...
- 阮的flex布局语法篇
作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + floa ...
- Flex 布局实例教程
2019独角兽企业重金招聘Python工程师标准>>> 主要参考资料是Landon Schropp的文章和Solved by Flexbox. 一.骰子的布局 骰子的一面,最多可以放 ...
- flex是什么及flex布局语法
Flex布局 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,自由的操作容器中元素(项目)的排列方式 任何一个容器都可以指定为 F ...
- CSS 之 Flex布局
CSS 之 Flex布局 文章目录 CSS 之 Flex布局 1.Flex布局 vs 网格布局 (1D vs 2D) 2.Flex属性 1)flex-direction属性 & 排列方向 2) ...
- scss flex布局
Flex 布局教程:语法篇 - 阮一峰的网络日志 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks CSS布局之Flex布局 - 走看看 Fl ...
最新文章
- php自动断词,PHP自动分页、防止英文单词被截段、去除HTML代码
- linux下修改ssh默认的连接端口及禁止root远程连接等
- POJ 3041	Asteroids 二分图匹配
- 颜宁问4对科研夫妻:男女搭配,如何不累?
- Servlet实现文件下载
- 为什么换工作?(面试必问问题)
- Fedora 8中完全开启compiz-fusion特效
- 买房,有多少人帮助过你?
- mysql存储数组类型的数据_mysql中怎么存储数组
- Oracle技术分享系列一:Oracle数据库学习资源推荐
- 桌面计算机主流硬盘接口,M.2和U.2谁更好?主流硬盘接口大扫盲
- detours钩子库的简单使用
- 无人机加速计、气压计、GPS数据融合
- CAD零基础教程笔记
- [单片机框架][bsp层][AT32F415][bsp_adc] adc配置和使用
- Python——数学运算函数
- 华为手机无法进入开发者模式
- angular检测ie浏览器,并给用户提示
- 手游推广加盟有哪些坑?
- 8月17日云栖精选夜读:用户体验再掀高潮_阿里云域名领跑用户体验
热门文章
- HTTP网络启动安装原版系统ISO镜像
- android ios 画图 app,手残党也能自画“小怪兽”?这些画图app你必须知道!
- RIS远程操作系统安装服务
- oracle集群安装ogg,在RAC下安装配置OGG
- Flash 实验 球体旋转效果 引导层
- 少儿英语-思维导图学语法-特殊名词变复数
- 计算机硬盘满了怎么解决,硬盘满了怎么办?
- mysql 模糊匹配比自己短潆字符_mysql中生成字符串对应的英文字母(拼音首字母)...
- 如何制作URL文件_艾孜尔江撰
- 计算机论文100,硕士论文选题100题(计 算 机)