2024年09月21日
表格的默认样式不好看，设置border="1"的时候,还会出现双边框，就像下面一样，直接上代码，看效果对比，而且用flex,可以轻易实现文字垂直居中。
1.修改前
<table border="1">
<tr>
<td>班级</td>
<td>姓名</td>
<td>成绩</td>
</tr>
<tr>
<td>一班</td>
<td>小明</td>
<td>90</td>
</tr>
<tr>
<td>二班</td>
<td>小红</td>
<td>100</td>
</tr>
</table>
2024年09月21日
Flex弹性盒，意为“弹性布局”，用来为盒状模型提供最大的灵活性。
当一个元素 display:flex 的时候，内部元素float会失效，vertical-align也会失效
2024年09月21日
本人一开始是做移动端原生开发的程序员一枚。现在原生开发实在是不咋景气，公司现在的项目基本上都是前端的项目，所以现在被调到前端，从小白一枚的角度出发分享一部分项目开发过程中用的比较多的知识吧，今天先学习一个flex布局，这个在项目中用到的实在太多了。
一、介绍
什么叫做弹性布局呢，他就是根据内容多少分配多大的控件，当内容不足时会自动的换行，去适应父布局，这也是他最大的好处 由此他可以去适配多种尺寸的页面。
二、flex结构
咱们先通过网上的一个图片看一下他的具体结构
2024年09月21日
在Flex容器中有几个核心术语
2024年09月21日
Flex 基本概念：
在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴，这个我们后面再说。
在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。
2024年09月21日
在页面布局中，我们经常会遇到/使用这么一类常见的布局，也就是列表内容水平居中于容器中，像是这样：
<ul class="g-contaner">
<li></li>
<li></li>
</ul>
2024年09月21日
flex是Flexible Box的缩写，意思为“弹性布局”，在使用过程中简单、易用、代码较少，在制作网页的时候经常使用这种方法来进行布局。
在使用的过程中任何一个容器都可以指定为Flex布局.{display:flex},行内元素也可以使用Flex布局.box{display:inline-flex;}。当我们将容器设置为Flex布局以后，容器当中的子元素的float、clear等属性会失效。采用Flex布局的元素，称为Flex容器，他的所有子元素自动成为容器成员，称为Flex项目。
2024年09月21日
Flex 是 Flexible Box 的缩写，意为"灵活的盒子"或"弹性的盒子"，所以 flex 布局一般也叫作"弹性布局"。
1.什么是 flex 容器（flex container）？采用 flex 布局的元素，称为 flex 容器。
2.什么是 flex 项目（flex item）？
2024年09月21日
点击右上方红色按钮关注“web秀”，让你真正秀起来
Flex（Flexible Box），意为”弹性布局”。“弹性”，顾名思义，就是具有弹簧的特性，能够自由的伸缩（有点自适应的意思）。
其实Flex并不是最近才出现的，而是早在十年前它就被提出。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。