display: block

"display: block;" 是 CSS 中的一种属性和值组合，用于控制 HTML 元素的布局。具体地，它使元素显示为块级元素，即元素会在其前后产生换行，并且可以设置元素的宽度、高度、内边距和外边距等属性。常用于实现一些单独占据一行或一定区域的元素，如段落、标题等。相对应的，还有 "display: inline;" 属性值，用于将元素显示为行内元素。

相关问题

display:block

The CSS property `display: block` is used to set the display behavior of an element to a block-level element. This means that the element will take up the full width of its parent container and will start a new line after it. Block-level elements are used for larger sections of content such as paragraphs, headings, and lists.

Example:

<div style="display: block;">
  This is a block-level element.
</div>

In this example, the `div` element is set to `display: block`, which means it will take up the full width of its parent container and start a new line after it. The text inside the `div` is a block-level element as well, since it is contained within a block-level element.

display: block属性阻止flex-direction生效。 请尝试将display: block属性设置为display: flex。

当我们把元素的display属性设置为block时，会阻止flex-direction属性生效。这是因为display属性同时只会生效一个，当我们将display设置为block时，flex布局失效。为了解决这个问题，我们可以将display属性设置为flex，而不是block。这样，元素既能显示出来，又能保持flex布局的效果。

因此，将display: block属性设置为display: flex可以解决这个问题。这样，我们可以同时实现元素的显示和flex布局的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [display: block和display: flex一块用出现的问题](https://blog.csdn.net/qq_42890921/article/details/129099809)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [详解CSS中的display:flex||inline-flex属性](https://download.csdn.net/download/weixin_38501751/12891643)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [display: block 属性影响flex布局](https://blog.csdn.net/m0_65491952/article/details/132038572)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]