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 ...
最新文章
- Google 全球 IP 地址库一览表(更新中)
- 大数据竞赛平台——Kaggle 入门篇
- 用java将excel数据导入txt
- 2.13 break和continue
- UESTC 电子科大专题训练 DP-N
- win10系统按esc会弹出计算机,win10系统版本2004控制面板多出ESC是什么原因?
- ArcGIS 10.2加载在线影像底图
- wordpress房产信息网_Realia v3.1.2 wordpress房地产模板 租房网站模板
- 大数据——sqoop操作mysql和hive导出导入数据
- 不同公式等号对齐_数学公式编辑器“制作amp;套用公式模板”和“文本对齐问题”的完美解决方案...
- 【转】Java 项目UML反向工程转化工具
- ubuntu 14.04 android jdk,Ubuntu 14.04 安裝 jdk8u20 並配置環境變量 安裝Android Studio
- k3note Android8,价格只差100 乐檬K3 Note对比红米Note
- Hprose轻松实现远程过程调用(RPC)
- 在一线城市生活一辈子需要多少钱
- 【论文下饭】Temporal Graph Network for Deep Learning on Dynamic Graphs
- tkinter在Mac下运行主界面显示黑色
- java集合(附源码分析)
- 基于STM32智能小车蓝牙遥控实验(有代码含上位机)
- 如何选择手游代理加盟平台?
热门文章
- 树和二叉树的思维导图(完整版)
- app如何增加推广功能 java_Java Web app如何实现这个功能蹦?诚心求指教。
- 从PDF签章文件中提取印章以及印章图片
- 【知识蒸馏】知识蒸馏(Knowledge Distillation)技术详解
- 卡拉上市在即 以终端收单切入谋求平台升级
- 检测到 #include 错误。请更新 includePath。已为此翻译单元(E:\abc.ino)禁用波形曲线。C/C++(1696) 无法打开 源 文件 “stadio.h“
- python设置打印机参数_打印文件并配置打印机设置
- 2020车工(中级)模拟考试系统及车工(中级)考试软件
- MySQL 整体知识
- 第7届全国大学生GIS应用技能大赛试题