diplay:flex

display:flex是CSS中的一个属性，用于指定一个容器元素采用flex布局。flex布局是一种弹性盒子布局，可以为盒模型提供最大的灵活性。通过设置display:flex，容器元素的子元素可以根据设定的规则自动调整大小和位置。\[3\]

在HTML中，可以通过设置class为"flex-container"的div元素为flex容器，然后在该容器内部添加class为"flex-item"的div元素作为子元素。这样就可以使用flex布局来控制子元素的排列和布局。\[2\]

在flex布局中，还可以使用flex属性来控制子元素的伸缩性。flex属性是flex-grow、flex-shrink和flex-basis的复合写法。可以使用flex:auto来代替flex:1 1 auto，表示子元素在伸缩时可以根据剩余空间自动调整大小。而使用flex:none可以代替flex:0 0 auto，表示子元素不会伸缩。此外，还可以使用align-self属性来单独控制某个子元素在交叉轴上的对齐方式。\[1\]

总之，display:flex是一种弹性盒子布局，通过设置容器元素的display属性为flex，可以实现灵活的子元素排列和布局。
#### 引用[.reference_title]
- *1* *3* [display:flex属性](https://blog.csdn.net/weixin_46380993/article/details/104572253)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [什么是弹性（display: flex）布局 ？](https://blog.csdn.net/weixin_41044151/article/details/114071215)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]