displayinlineblock和flex布局的区别
1、display： inline-block和flex布局在元素排列、对齐方式、空间分配和顺序调整等方面存在明显的区别。元素排列方式：display： inline-block的元素会在同一行内显示，直到行末才会换行。相比之下，flex布局的子元素默认沿着主轴（默认为水平方向）排列，当主轴空间不足时，会自动换行到下一行。
2、最外层父元素设置为弹性布局，子元素设置为 display：inline-block。子元素的第二级的div根据条件判断是否显示（display：none）。导致的问题：设置space-between.每一行的最后一个子元素距离最右边有一定的宽度。原因：当内部元素（第2步）不显示的时候，子元素（第一步里的）应该也设置为display：none。
3、同样，若子元素为块级元素，将其转换为行内块级元素（设置display： inline-block；），并结合文本对齐方式同样可以达到目的。此方法在多数情况下适用，但存在特殊情况，如子元素为浮动元素，可能影响水平居中效果。适用于多数布局场景，如文本、图片等。
4、普通盒模型与IE盒模型的区别，如下图： 除此之外，我们通过对盒子display？属性的设置，比如？inline？或者？block？，来控制盒子的外部显示类型。同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。我们可以通过使用类似？flex？的？display？属性值来更改内部显示类型。
5、display 属性用于定义元素在页面布局中的展现形式，涉及其框体生成及盒模型处理。通过调整 display 属性，可改变元素显示状态，比如转换为块级元素、行内元素、弹性盒子等。
移动端flex布局justify-content对齐方式解析
Flex布局提供了多种对齐方式，以满足不同布局需求。justify-content属性控制主轴方向上的对齐，常见的对齐方式包括justify-content：center；、justify-content：space-between；、justify-content：space-around；和justify-content：space-evenly；。这些属性分别对应居中对齐、两端对齐、均匀间隔对齐和等间距对齐。
justify-content是flex弹性布局中关键的对齐属性，用于控制项目在主轴方向上的分布方式。通过一系列示例，我们可以直观理解其作用：示例1 （flex-start）： 默认值，项目按照从左到右的顺序排列。 示例2 （flex-end）： 项目排列在容器的右边，但顺序不变。 示例3 （center）： 项目居中对齐，间距均匀。
justify-content： 主轴对齐方式，包括flex-start（左对齐）、flex-end（右对齐）、center（居中）、space-between（等间距对齐）和space-around（均匀分布）。 align-items： 单行垂直对齐，如flex-start（顶部对齐）、flex-end（底部对齐）、center（居中）、baseline（文字底部对齐）和stretch（自动拉伸）。
flex-direction： 控制元素沿主轴方向的排列，如默认的row，元素从左到右。justify-content： 主轴方向上的对齐方式，如center，实现元素水平居中。align-items 和 align-self： 分别对应交叉轴的对齐，后者允许对个别元素定制对齐规则。flex-wrap： 控制换行规则，如wrap，用于处理过多元素。
用了flex布局,自动换行,三行三列但有10个li,多出一个想放在第一排最后...
box属性是一行分多列，而你的需求相当于三行，因此，使用box不适合。建议：使用3个长度100%的主div进行布局；使用CSS定位控制（position属性）固定上下两个div。css三栏式布局右边的div掉下去了中间那个没设置浮动，这个也要设置浮动，设置左浮动。
标签： #flex布局自动换行
