flex布局解说和属性
2024-09-07 19:45:46
1. flex-direction 规定当前DIV下面的子元素是横向布局还是纵向布局
| row | 默认值，横向布局相当于float:left |
| column | 纵向,相当于DIV默认的垂直方向 |
2.justify-conten 主轴居左，居中，居右（这跟flex-direction的对齐方式改变而改变，没有固定的横向和纵向）
| flex-start | 模块居左边 |
| flex-end | 模块居右边 |
| center | 模块居中（相当于margin:0 auto） |
| space-between | 模块两端对齐 |
3.align-items 侧轴居上，居中，居下（这跟flex-direction的对齐方式改变而改变，没有固定的横向和纵向）
| flex-start | 模块垂直居上 |
| center | 模块垂直居中（line-height:50px） |
| flex-end | 模块垂直居下 |
4.flex-wrap flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向
| nowrap | 默认值，所有模块一行展示 |
| wrap | 根据DIV的宽度，下面的模块自动是多行还是一行横向排版 |
5.flex-shrink处理文本溢出
| number | 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。 |
6:align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
| auto | 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。 |
| baseline |
元素位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。 |
| center |
元素位于容器的中心。 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 |
最新文章
- JAVA NIO Socket通道
- CSS系列：CSS的继承与层叠特性
- POI2005Bank notes银行货币
- CentOS 7下MySQL安装配置
- 使用DOS比较两个txt文件的差异
- [bzoj2245][SDOI2011]工作安排（费用流）
- ctags 的最简单使用
- 如何用sqlyog实现远程连接mysql
- Mysql查询比较
- nginx: [emerg] bind() to 0.0.0.0:80 failed (13: Permission denied)
- CodeForces 300A Array
- Unity3D如何获取对象和子对象
- 在unity3d中连接sql server
- 基于visual Studio2013解决C语言竞赛题之0201温度转换
- 为什么要用深度学习来做个性化推荐 CTR 预估
- Docker服务端防护
- leetcode(js)算法之696计数二进制串
- Java ee第五周作业
- ASP 错误捕捉，处理
- Jquery 组 tbale表格隔行变色