刚刚displayflex是什么布局（不久前display flex1）

display:flex是什么意思

display：flex 意思是弹性布局，它能够扩展和收缩flex容器内的元素，以最大限度地填充可用空间。Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。Flex布局的基本概念flex container（弹性容器）：采用Flex布局的元素，称为Flex容器，简称“容器”。

display：flex：这是一个块级布局方式。当你为某个元素设置`display：flex`，它会生成一个新的flex容器，其内部的子元素会成为flex项，并沿主轴排列。这意味着flex容器独占一行，与其他元素不会并排显示。

display：flex：主要用于创建块级容器，使其内部子元素可以动态调整布局。它会创建一个新的块级格式化上下文，适用于需要复杂布局控制的场景。display：inlineflex：为行内元素设计，子元素会保持行内样式，同时沿行内方向具有弹性。这意味着元素不会影响其他行内元素的行高，更适合创建简洁的行内布局。

display:flex

display：flex 意思是弹性布局，它能够扩展和收缩flex容器内的元素，以最大限度地填充可用空间。Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。Flex布局的基本概念flex container（弹性容器）：采用Flex布局的元素，称为Flex容器，简称“容器”。

弹性布局（Flexbox）是一种为盒状模型提供更有效的布局、对齐和分配空间方式，即使容器大小动态变化或者未知也是如此。以下是Flexbox布局属性的详细解释： flex-direction 作用：定义主轴的方向（即项目的排列方向）。可选值：row（默认值）：主轴为水平方向，起点在左端。

display：flex：这是一个块级布局方式。当你为某个元素设置`display：flex`，它会生成一个新的flex容器，其内部的子元素会成为flex项，并沿主轴排列。这意味着flex容器独占一行，与其他元素不会并排显示。

display：inlineflex和display：flex之间的主要区别如下：布局方向：display：flex：主要用于创建块级容器，使其内部子元素可以动态调整布局。它会创建一个新的块级格式化上下文，适用于需要复杂布局控制的场景。display：inlineflex：为行内元素设计，子元素会保持行内样式，同时沿行内方向具有弹性。

「布局」静态布局、自适应布局、流式布局、响应式布局、弹性布局...

1、自适应布局 ：创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，使用 @media媒体查询 技术。流式布局 ：元素的宽高用 百分比 做单位，元素宽高按屏幕分辨率调整，布局不发生变化。屏幕尺度跨度过大的情况下，页面不能正常显示。

2、流式布局：布局特点是屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。自适应布局：自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。响应式布局：布局特点是每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

3、页面布局有多种方法，其中常见的有静态布局、流式布局、自适应布局、响应式布局和弹性布局。静态布局：这是传统的Web设计方式，以像素为单位，不管浏览器尺寸如何变化，页面元素的尺寸和位置都固定不变。

弹性布局(display:flex;)属性详解

弹性布局（Flexbox）是一种为盒状模型提供更有效的布局、对齐和分配空间方式，即使容器大小动态变化或者未知也是如此。以下是Flexbox布局属性的详细解释： flex-direction 作用：定义主轴的方向（即项目的排列方向）。可选值：row（默认值）：主轴为水平方向，起点在左端。

弹性布局，也称为Flex布局，是一种CSS布局方式，通过display： flex属性创建弹性容器，实现元素的灵活排列和定位。弹性布局的特点在于简化了网页布局开发，提供了灵活且响应式的布局方式。它适用于各种屏幕尺寸和设备，能快速适应不同布局需求。

flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

弹性布局是一种CSS布局方式，通过display： flex属性创建弹性容器，实现元素的灵活排列和定位。以下是对Flex布局的详细讲解：弹性布局的特点 简化开发：弹性布局简化了网页布局开发过程，提供了更加直观和灵活的方式。 响应式布局：适用于各种屏幕尺寸和设备，能够快速适应不同的布局需求。

css3display:flex和display:box有什么区别?

1、在CSS3领域中，display：flex和display：box是用于定义元素布局的两种重要属性。它们之间存在显著的区别，且在应用中表现出不同的特点。首先，display：flex是自2012年引入的一种更现代的语法，它也被视为未来的标准。目前，大多数浏览器已经支持无前缀的版本，这意味着在实现跨浏览器兼容性方面，使用display：flex更为便捷且高效。

2、box：主要是控制父容器里面子元素的排列方式、排列顺序、垂直（水平）对齐方式 box-flex：主要让子容器针对父容器的宽度按一定规则进行划分 注意：前者是flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。后者是2009年的语法，已经过时，是需要加上对应前缀的。

3、CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。对于很多应用来讲，弹性盒改进了块模型，既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距。许多设计师会发现弹性盒容易上手。

4、如果要说区别，display：box； 是老规范，要兼顾古董机子就加上它。flexbox flex 是新规范，老机子不支持的。