Flex布局
来源：互联网 发布：传奇npc算法 编辑：程序博客网 时间：2024/06/10 05:42
Flex布局
先写个教程。
flex布局教程；
demo地址；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flex</title> <style> div { background-color: #dddddd; border-radius: 5px; border: 1px solid #000; margin: 10px; } .bgc1 { background-color: #aaaaaa; } .bgc2 { background-color: #888; } .block { width: 100px; height: 100px; } .block2 { width: 80px; height: 80px; } .block3 { width: 60px; height: 60px; } .flex { /*声明flex*/ display: flex; display: -webkit-flex; } .flex-inline { /*声明inline-flex*/ display: inline-flex; display: -webkit-inline-flex; } .flex-direction-row { /*声明flex排列方向为横排起点在左*/ flex-direction: row; } .flex-direction-row-reverse { /*声明flex排列方向为横排起点在右*/ flex-direction: row-reverse; } .flex-direction-column { /*声明flex排列方向为竖排起点在上*/ flex-direction: column; } .flex-direction-column-reverse { /*声明flex排列方向竖排起点在下*/ flex-direction: column-reverse; } .flex-wrap-nowrap { /*声明flex装不开时不换行换行*/ /*当装不开时会挤压内部元素，知道实在装不开，就被挤压出来*/ flex-wrap: nowrap; } .flex-wrap-wrap { /*声明flex装不开时进行换行换的行比第一行靠后*/ /*很像 float 但是完全不一样，这个会随着felx的其他属性表现的和float差很多*/ flex-wrap: wrap; } .flex-wrap-wrap-reverse { /*声明flex装不开时进行换行换的行比第一行靠前*/ flex-wrap: wrap-reverse; } .flex-flow { /*声明flex的direction和wrap的简写属性*/ flex-flow: nowrap row-reverse; } .justify-content-flex-start { /*声明flex的ontent-flex-start 按照主轴由向起点靠拢*/ justify-content: flex-start; } .justify-content-flex-end { /*声明flex的ontent-flex-start 按照主轴向终点靠拢*/ justify-content: flex-end; } .justify-content-center { /*声明flex的ontent-flex-start 按照主轴向中心靠拢*/ justify-content:center; } .justify-content-space-between { /*声明flex的ontent-flex-start 按照主轴每个元素平分后相距最远相当于只有和所有子元素之间有margin*/ justify-content: space-between; } .justify-content-space-around { /*声明flex的ontent-flex-start 按照主轴每个元素平分空间类似左右都有对等的margin*/ justify-content: space-around; } .text { font-size: 2em; line-height: 100px; text-align: center; margin:0; } .text2 { font-size: 2em; line-height: 80px; text-align: center; margin:0; } .text3 { font-size: 2em; line-height: 60px; text-align: center; margin:0; } </style></head><body><h1>flex基础状况</h1><div class="flex"> <div class="block bgc1 "> </div> <div class="block bgc2"> </div></div><h1>inline-flex状况</h1><div class="flex-inline"> <div class="block bgc1 "> </div> <div class="block bgc2"> </div></div><h1> flex横排正序</h1><div class="flex flex-direction-row"> <div class="block bgc1 "> </div> <div class="block bgc2"> </div></div><h1> flex横排倒序</h1><div class="flex flex-direction-row-reverse"> <div class="block bgc1 "> </div> <div class="block bgc2"> </div></div><h1> flex竖排正序</h1><div class="flex flex-direction-column"> <div class="block bgc1 "> </div> <div class="block bgc2"> </div></div><h1> flex竖排倒序</h1><div class="flex flex-direction-column-reverse"> <div class="block bgc1 "> </div> <div class="block bgc2"> </div></div><h1> flex竖排倒序</h1><div class="flex flex-direction-column-reverse"> <div class="block bgc1 "> </div> <div class="block bgc2"> </div></div><h1> flex竖排倒序</h1><div class="flex flex-direction-column-reverse"> <div class="block bgc1 "> </div> <div class="block bgc2"> </div></div><h1> flex横排正序，单行</h1><div class="flex flex-direction-row flex-wrap-nowrap"> <div class="block bgc1 "> <p class="text">1</p> </div> <div class="block bgc2"> <p class="text">2</p> </div> <div class="block bgc1 "> <p class="text">3</p> </div> <div class="block bgc2"> <p class="text">4</p> </div> <div class="block bgc1 "><p class="text">5</p> </div> <div class="block bgc2"><p class="text">6</p> </div> <div class="block bgc1 "><p class="text">7</p> </div> <div class="block bgc2"><p class="text">8</p> </div> <div class="block bgc1 "><p class="text">9</p> </div> <div class="block bgc2"><p class="text">10</p> </div> <div class="block bgc1 "><p class="text">11</p> </div></div><h1> flex横排正序，多行正排</h1><div class="flex flex-direction-row flex-wrap-wrap"> <div class="block bgc1 "> <p class="text">1</p> </div> <div class="block bgc2"> <p class="text">2</p> </div> <div class="block bgc1 "> <p class="text">3</p> </div> <div class="block bgc2"> <p class="text">4</p> </div> <div class="block bgc1 "><p class="text">5</p> </div> <div class="block bgc2"><p class="text">6</p> </div> <div class="block bgc1 "><p class="text">7</p> </div> <div class="block bgc2"><p class="text">8</p> </div> <div class="block bgc1 "><p class="text">9</p> </div> <div class="block bgc2"><p class="text">10</p> </div> <div class="block bgc1 "><p class="text">11</p> </div></div><h1> flex横排正序，多行反排</h1><div class="flex flex-direction-row flex-wrap-wrap-reverse"> <div class="block bgc1 "> <p class="text">1</p> </div> <div class="block bgc2"> <p class="text">2</p> </div> <div class="block bgc1 "> <p class="text">3</p> </div> <div class="block bgc2"> <p class="text">4</p> </div> <div class="block bgc1 "><p class="text">5</p> </div> <div class="block bgc2"><p class="text">6</p> </div> <div class="block bgc1 "><p class="text">7</p> </div> <div class="block bgc2"><p class="text">8</p> </div> <div class="block bgc1 "><p class="text">9</p> </div> <div class="block bgc2"><p class="text">10</p> </div> <div class="block bgc1 "><p class="text">11</p> </div></div><h1> flex横排正序，向起点集中</h1><div class="flex flex-direction-row justify-content-flex-start"> <div class="block bgc1 "> <p class="text">1</p> </div> <div class="block bgc2"> <p class="text">2</p> </div> <div class="block bgc1 "> <p class="text">3</p> </div> <div class="block bgc2"> <p class="text">4</p> </div></div><h1> flex横排正序，向终点集中</h1><div class="flex flex-direction-row justify-content-flex-end"> <div class="block bgc1 "> <p class="text">1</p> </div> <div class="block bgc2"> <p class="text">2</p> </div> <div class="block bgc1 "> <p class="text">3</p> </div> <div class="block bgc2"> <p class="text">4</p> </div></div><h1> flex横排正序，向中间集中</h1><div class="flex flex-direction-row justify-content-center"> <div class="block bgc1 "> <p class="text">1</p> </div> <div class="block bgc2"> <p class="text">2</p> </div> <div class="block bgc1 "> <p class="text">3</p> </div> <div class="block bgc2"> <p class="text">4</p> </div></div><h1> flex横排正序，向平分距离</h1><div class="flex flex-direction-row justify-content-space-between"> <div class="block bgc1 "> <p class="text">1</p> </div> <div class="block bgc2"> <p class="text">2</p> </div> <div class="block bgc1 "> <p class="text">3</p> </div> <div class="block bgc2"> <p class="text">4</p> </div></div><h1> flex横排正序，平分空间</h1><div class="flex flex-direction-row justify-content-space-around"> <div class="block bgc1 "> <p class="text">1</p> </div> <div class="block bgc2"> <p class="text">2</p> </div> <div class="block bgc1 "> <p class="text">3</p> </div> <div class="block bgc2"> <p class="text">4</p> </div></div><h1> flex横排正序，平分空间</h1><div class="flex flex-direction-row justify-content-space-around"> <div class="block bgc1 "> <p class="text">1</p> </div> <div class="block bgc2"> <p class="text">2</p> </div> <div class="block bgc1 "> <p class="text">3</p> </div> <div class="block bgc2"> <p class="text">4</p> </div></div><h1> flex横排正序，交叉轴上上对其</h1><div class="flex flex-direction-row " style="align-items:flex-start;"> <div class="block bgc1 "> <p class="text">1</p> </div> <div class="block2 bgc2"> <p class="text2">2</p> </div> <div class="block3 bgc1 "> <p class="text3">3</p> </div></div><h1> flex横排正序，交叉轴上下对其</h1><div class="flex flex-direction-row " style="align-items:flex-end;"> <div class="block bgc1 "> <p class="text">1</p> </div> <div class="block2 bgc2"> <p class="text2">2</p> </div> <div class="block3 bgc1 "> <p class="text3">3</p> </div></div><h1> flex横排正序，交叉轴上中对齐</h1><div class="flex flex-direction-row " style="align-items:center;"> <div class="block bgc1 "> <p class="text">1</p> </div> <div class="block2 bgc2"> <p class="text2">2</p> </div> <div class="block3 bgc1 "> <p class="text3">3</p> </div></div><h1> flex横排正序，交叉轴上没有控制大小时平铺拉伸</h1><div class="flex flex-direction-row " style="align-items:stretch;"> <div class="block bgc1 "> <p class="text">1</p> </div> <div class="block2 bgc2"> <p class="text2">2</p> </div> <div class="block3 bgc1 "> <p class="text3">3</p> </div></div><h1> flex横排正序，交叉轴上文字对齐</h1><div class="flex flex-direction-row " style="align-items:baseline;"> <div class="block bgc1 "> <p class="text">1</p> </div> <div class="block2 bgc2"> <p class="text2">2</p> </div> <div class="block3 bgc1 "> <p class="text3">3</p> </div></div><h1> flex横排正序，多排交叉轴向对齐</h1><div class="flex flex-direction-row flex-wrap-wrap" style="align-content:flex-start; height:380px;"> <div class="block bgc1 "> <p class="text">1</p> </div> <div class="block bgc2"> <p class="text">2</p> </div> <div class="block bgc1 "> <p class="text">3</p> </div> <div class="block bgc2"> <p class="text">4</p> </div> <div class="block bgc1 "><p class="text">5</p> </div> <div class="block bgc2"><p class="text">6</p> </div> <div class="block bgc1 "><p class="text">7</p> </div> <div class="block bgc2"><p class="text">8</p> </div> <div class="block bgc1 "><p class="text">9</p> </div> <div class="block bgc2"><p class="text">10</p> </div> <div class="block bgc1 "><p class="text">11</p> </div> <div class="block bgc1 "><p class="text">12</p> </div> <div class="block bgc2"><p class="text">13</p> </div> <div class="block bgc1 "><p class="text">14</p> </div> <div class="block bgc2"><p class="text">15</p> </div> <div class="block bgc1 "><p class="text">16</p> </div></div><h1> flex横排正序，多排交叉轴向结束端对齐</h1><div class="flex flex-direction-row flex-wrap-wrap" style="align-content:flex-end; height:380px;"> <div class="block bgc1 "> <p class="text">1</p> </div> <div class="block bgc2"> <p class="text">2</p> </div> <div class="block bgc1 "> <p class="text">3</p> </div> <div class="block bgc2"> <p class="text">4</p> </div> <div class="block bgc1 "><p class="text">5</p> </div> <div class="block bgc2"><p class="text">6</p> </div> <div class="block bgc1 "><p class="text">7</p> </div> <div class="block bgc2"><p class="text">8</p> </div> <div class="block bgc1 "><p class="text">9</p> </div> <div class="block bgc2"><p class="text">10</p> </div> <div class="block bgc1 "><p class="text">11</p> </div> <div class="block bgc1 "><p class="text">12</p> </div> <div class="block bgc2"><p class="text">13</p> </div> <div class="block bgc1 "><p class="text">14</p> </div> <div class="block bgc2"><p class="text">15</p> </div> <div class="block bgc1 "><p class="text">16</p> </div></div><h1> flex横排正序，多排交叉轴向中心对齐</h1><div class="flex flex-direction-row flex-wrap-wrap" style="align-content:center; height:380px;"> <div class="block bgc1 "> <p class="text">1</p> </div> <div class="block bgc2"> <p class="text">2</p> </div> <div class="block bgc1 "> <p class="text">3</p> </div> <div class="block bgc2"> <p class="text">4</p> </div> <div class="block bgc1 "><p class="text">5</p> </div> <div class="block bgc2"><p class="text">6</p> </div> <div class="block bgc1 "><p class="text">7</p> </div> <div class="block bgc2"><p class="text">8</p> </div> <div class="block bgc1 "><p class="text">9</p> </div> <div class="block bgc2"><p class="text">10</p> </div> <div class="block bgc1 "><p class="text">11</p> </div> <div class="block bgc1 "><p class="text">12</p> </div> <div class="block bgc2"><p class="text">13</p> </div> <div class="block bgc1 "><p class="text">14</p> </div> <div class="block bgc2"><p class="text">15</p> </div> <div class="block bgc1 "><p class="text">16</p> </div></div><h1> flex横排正序，多排交叉轴向两端对齐</h1><div class="flex flex-direction-row flex-wrap-wrap" style="align-content:space-between; height:380px;"> <div class="block bgc1 "> <p class="text">1</p> </div> <div class="block bgc2"> <p class="text">2</p> </div> <div class="block bgc1 "> <p class="text">3</p> </div> <div class="block bgc2"> <p class="text">4</p> </div> <div class="block bgc1 "><p class="text">5</p> </div> <div class="block bgc2"><p class="text">6</p> </div> <div class="block bgc1 "><p class="text">7</p> </div> <div class="block bgc2"><p class="text">8</p> </div> <div class="block bgc1 "><p class="text">9</p> </div> <div class="block bgc2"><p class="text">10</p> </div> <div class="block bgc1 "><p class="text">11</p> </div> <div class="block bgc1 "><p class="text">12</p> </div> <div class="block bgc2"><p class="text">13</p> </div> <div class="block bgc1 "><p class="text">14</p> </div> <div class="block bgc2"><p class="text">15</p> </div> <div class="block bgc1 "><p class="text">16</p> </div></div><h1> flex横排正序，多排交叉轴向平分空间</h1><div class="flex flex-direction-row flex-wrap-wrap" style="align-content:space-around; height:380px;"> <div class="block bgc1 "> <p class="text">1</p> </div> <div class="block bgc2"> <p class="text">2</p> </div> <div class="block bgc1 "> <p class="text">3</p> </div> <div class="block bgc2"> <p class="text">4</p> </div> <div class="block bgc1 "><p class="text">5</p> </div> <div class="block bgc2"><p class="text">6</p> </div> <div class="block bgc1 "><p class="text">7</p> </div> <div class="block bgc2"><p class="text">8</p> </div> <div class="block bgc1 "><p class="text">9</p> </div> <div class="block bgc2"><p class="text">10</p> </div> <div class="block bgc1 "><p class="text">11</p> </div> <div class="block bgc1 "><p class="text">12</p> </div> <div class="block bgc2"><p class="text">13</p> </div> <div class="block bgc1 "><p class="text">14</p> </div> <div class="block bgc2"><p class="text">15</p> </div> <div class="block bgc1 "><p class="text">16</p> </div></div><h1> flex横排正序，多排交叉轴向无具体大小时平分平铺</h1><div class="flex flex-direction-row flex-wrap-wrap" style="align-content:stretch; height:380px;"> <div class="block bgc1 "> <p class="text">1</p> </div> <div class="block bgc2"> <p class="text">2</p> </div> <div class="block bgc1 "> <p class="text">3</p> </div> <div class="block bgc2"> <p class="text">4</p> </div> <div class="block bgc1 "><p class="text">5</p> </div> <div class="block bgc2"><p class="text">6</p> </div> <div class="block bgc1 "><p class="text">7</p> </div> <div class="block bgc2"><p class="text">8</p> </div> <div class="block bgc1 "><p class="text">9</p> </div> <div class="block bgc2"><p class="text">10</p> </div> <div class="block bgc1 "><p class="text">11</p> </div> <div class="block bgc1 "><p class="text">12</p> </div> <div class="block bgc2"><p class="text">13</p> </div> <div class="block bgc1 "><p class="text">14</p> </div> <div class="block bgc2"><p class="text">15</p> </div> <div class="block bgc1 "><p class="text">16</p> </div></div><h1> flex横排正序，项目属性order排序默认是0</h1><div class="flex flex-direction-row " > <div class="block bgc1 " style="order: 1"> <p class="text">1</p> </div> <div class="block bgc2" style="order: 2"> <p class="text">2</p> </div> <div class="block bgc1 " style="order: 6"> <p class="text">3</p> </div> <div class="block bgc2" style="order: 4"> <p class="text">4</p> </div> <div class="block bgc1 " style="order: 7"><p class="text">5</p> </div> <div class="block bgc2" style="order: 5"><p class="text">6</p> </div> <div class="block bgc1 "><p class="text">7</p> </div> <div class="block bgc2"><p class="text">8</p> </div> <div class="block bgc1 "><p class="text">9</p> </div> <div class="block bgc2"><p class="text">10</p> </div> <div class="block bgc1 "><p class="text">11</p> </div> <div class="block bgc1 "><p class="text">12</p> </div> <div class="block bgc2"><p class="text">13</p> </div> <div class="block bgc1 "><p class="text">14</p> </div> <div class="block bgc2"><p class="text">15</p> </div> <div class="block bgc1 "><p class="text">16</p> </div></div><h1> flex横排正序，flex-grow控制放大属性，有空余空间是会放大根据0不会有任何变化默认为0</h1><div class="flex flex-direction-row flex-wrap-wrap" > <div class="block bgc1 " style="flex-grow: 0"> <p class="text">1</p> </div> <div class="block bgc2" style="flex-grow: 1"> <p class="text">2</p> </div> <div class="block bgc1 " style="flex-grow: 2"> <p class="text">3</p> </div> <div class="block bgc2" style="flex-grow: 3"> <p class="text">4</p> </div></div><h1> flex横排正序，flex-shrink控制缩小属性，有空间不足是会缩小根据0不会有任何变化默认为1越大缩小的越多</h1><div class="flex flex-direction-row " > <div class="block bgc1 " style="flex-shrink: 0"> <p class="text">1</p> </div> <div class="block bgc2" style="flex-shrink: 1"> <p class="text">2</p> </div> <div class="block bgc1 " style="flex-shrink: 2"> <p class="text">3</p> </div> <div class="block bgc2" style="flex-shrink: 3"> <p class="text">4</p> </div></div><h1> flex横排正序，flex-basic控制项目所占空间，距离值</h1><div class="flex flex-direction-row " > <div class="block bgc1 " style="flex-basis: 0"> <p class="text">1</p> </div> <div class="block bgc2" style="flex-basis: 30px"> <p class="text">2</p> </div> <div class="block bgc1 " style="flex-basis: 50px"> <p class="text">3</p> </div> <div class="block bgc2" style="flex-basis: 100px"> <p class="text">4</p> </div></div><h1> flex横排正序，align-self控制项目单个的对齐方式</h1><div class="flex flex-direction-row " style="height: 200px;"> <div class="block bgc1 " style="align-self: flex-start"> <p class="text">1</p> </div> <div class="block bgc2" style="align-self: flex-end"> <p class="text">2</p> </div> <div class="block bgc1 " style="align-self: center"> <p class="text">3</p> </div> <div class="block bgc2" style="align-self: flex-start"> <p class="text">4</p> </div></div></body></html> 0 0
- Flex布局
- flex布局
- Flex 布局
- flex布局
- Flex 布局
- Flex布局
- Flex布局
- Flex布局
- flex布局
- Flex布局
- flex布局
- flex布局
- Flex布局
- flex布局
- flex布局
- Flex布局
- Flex布局
- Flex布局
- OpenGl面试题（持续更新）
- caffe编译遇到的问题（持续更新）
- Shaders to regulate image lightness like in PhotoShop(shader实现Photoshop的亮度调节效果,按钮变暗效果)
- A 房间安排
- Springboot 跑单元测试
- Flex布局
- 支持向量机--SVM入门
- webstrom less 配置
- spring HelloWorld!
- 关于使用hadoop出各种错的一些积累
- python,apt-get安装包位置
- com.caucho.jsp.JspParseException Resin can't load com.sun.tools.javac.Main
- Ubuntu14.04源码编译安装CPU版本的tensorflow
- iOS开发微信、QQ应用名称修改
