![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：每个布局技术的出现, 都是有背景的, 都是为了解决一个难题
Collection
Collection
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {width: 100%;padding: 150px;min-height: 800px;column-count: 5;border: 1px dashed blue;}</style><title>文字的自动分列</title></head><body><div class="box">二愣子睁大着双眼，直直望着茅草和烂泥糊成的黑屋顶，身上盖着的旧棉被，已呈深黄色，看不出原来的本来面目，还若有若无的散发着淡淡的霉味。在他身边紧挨着的另一人，是二哥韩铸，酣睡的十分香甜，从他身上不时传来轻重不一的阵阵打呼声。离床大约半丈远的地方，是一堵黄泥糊成的土墙，因为时间过久，墙壁上裂开了几丝不起眼的细长口子，从这些裂纹中，隐隐约约的传来韩母唠唠叨叨的埋怨声，偶尔还掺杂着韩父，抽旱烟杆的“啪嗒”“啪嗒”吸允声。二愣子缓缓的闭上已有些发涩的双目，迫使自己尽早进入深深的睡梦中。他心里非常清楚，再不老实入睡的话，明天就无法早起些了，也就无法和其他约好的同伴一起进山拣干柴。二愣子姓韩名立，这么像模像样的名字,他父母可起不出来，这是他父亲用两个粗粮制成的窝头，求村里老张叔给起的名字。老张叔年轻时，曾经跟城里的有钱人当过几年的伴读书童，是村里唯一认识几个字的读书人，村里小孩子的名字，倒有一多半是他给起的。韩立被村里人叫作“二愣子”，可人并不是真愣真傻，反而是村中首屈一指的聪明孩子，但就像其他村中的孩子一样，除了家里人外，他就很少听到有人正式叫他名字“韩立”，倒是“二愣子”“二愣子”的称呼一直伴随至今。而之所以被人起了个“二愣子”的绰号，也只不过是因为村里已有一个叫“愣子”的孩子了。这也没啥，村里的其他孩子也是“狗娃”“二蛋”之类的被人一直称呼着，这些名字也不见得比“二愣子”好听了哪里去。因此，韩立虽然并不喜欢这个称呼，但也只能这样一直的自我安慰着。韩立外表长得很不起眼，皮肤黑黑的，就是一个普通的农家小孩模样。但他的内心深处，却比同龄人早熟了许多，他从小就向往外面世界的富饶繁华，梦想有一天，他能走出这个巴掌大的村子，去看看老张叔经常所说的外面世界。当韩立的这个想法，一直没敢和其他人说起过。否则，一定会使村里人感到愕然，一个乳臭未干的小屁孩，竟然会有这么一个大人也不敢轻易想的念头。要知道，其他同韩立差不多大的小孩，都还只会满村的追鸡摸狗，更别说会有离开故土，这么一个古怪的念头。韩立一家七口人，有两个兄长，一个姐姐，还有一个小妹，他在家里排行老四，今年刚十岁，家里的生活很清苦，一年也吃不上几顿带荤腥的饭菜，全家人一直在温饱线上徘徊着。此时的韩立，正处于迷迷糊糊，似睡未睡之间，恼中还一直残留着这样的念头：上山时，一定要帮他最疼爱的妹妹，多拣些她最喜欢吃的红浆果。第二天中午时分，当韩立顶着火辣辣的太阳，背着半人高的木柴堆，怀里还揣着满满一布袋浆果，从山里往家里赶的时侯，并不知道家中已来了一位，会改变他一生命运的客人。这位贵客，是跟他血缘很近的一位至亲，他的亲三叔。</div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {width: 300px;min-height: 50px;border: 1px dashed green;/* 设置成为弹性盒子 */display: flex;}.container > .item {/* 平局分布 */flex: auto;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div></body></html>
增加项目后依然会自动分布
不自动换行命令 flex-wrap: nowrap;
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>弹性盒子的自动换行</title><style>.container {width: 300px;min-height: 50px;border: 1px dashed green;/* 设置成为弹性盒子 */display: flex;}.container > .item {width: 110px;/* 平局分布 *//* flex: auto; */}.container {/* 自动换行 */flex-wrap: wrap;/* 不自动换行 *//* flex-wrap: nowrap; */}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">1</div><div class="item">2</div><div class="item">3</div></div></body></html>
靠右对齐 justify-content: flex-end;
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>单行容器的居中对齐(两边空着)</title><style>.container {width: 300px;min-height: 50px;/* 设置成为弹性盒子 */display: flex;/* 居中对齐 */justify-content: center;/* 靠左对齐 *//* justify-content: flex-start; *//* 靠右对齐 *//* justify-content: flex-end; */}.container > .item {width: 80px;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div></body></html>
/* 所有项目平均分布 两边的靠边*/justify-content: space-between;
/* 分散分布 1和2之间的句里是1左边的2倍 */justify-content: space-around;
/* 平均分配剩余空间 每个项目两边的空间都相等 */justify-content: space-evenly;
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>6.多行容器的分布排列</title><style>.container {width: 300px;min-height: 200px;/* 设置成为弹性盒子 */display: flex;/* 允许多行排列 */flex-wrap: wrap;}.container > .item {width: 80px;min-height: 30px;}.container {/* 行中居中 */align-content: center;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div><div class="item">10</div><div class="item">11</div><div class="item">12</div></div></body></html>
align-content: center; 居中
align-content: flex-start;靠上
align-content: space-between; 分散对齐两边无空位
/* 主轴方向默认为行 */flex-direction: row;/* 主轴方向为列 手机端基本都是这种布局*/flex-direction: column;
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>flex编写一个导航栏</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}a {text-decoration: none;color: #ccc;padding: 0 25px;/* 设置行高 */line-height: 40px;}nav {height: 40px;background-color: #333;padding: 0 50px;/* 转为弹性盒子 */display: flex;/* justify-content: center; */}header nav a:first-of-type {/* 第一个a标签靠左 */margin-right: auto;padding-left: 30px;}nav a:last-of-type {/* 最后一个a标签靠右 */margin-left: auto;}nav a:hover {color: rgb(255, 0, 0);}</style></head><body><header><nav><a href=""><img src="logo.png" alt="" height="40" /></a><a href="">首页</a><a href="">视频教程</a><a href="">入门教程</a><a href="">社区问答</a><a href="">注册/登陆</a></nav></header></body></html>
1.文字的自动分列 column属性
2.弹性盒子的使用方法
3.自动换行命令 flex-wrap: wrap; 不自动换行命令 flex-wrap: nowrap;
4.弹性盒子的自动对齐(将所有项目视为一个整体)-左面-右面-居中
5.弹性盒子的自动对齐(将所有项目视为独立的个体)
6.弹性盒子的自动对齐(行于行的对齐)
7.主轴方向
天蓬老师