flex不脱离文档流能够使两个块级元素一行显示

如果不使用Flex布局或者不脱离文档流，两个块级元素默认是按照文档流的规则进行布局，即每个元素独占一行。要使两个块级元素一行显示，可以考虑以下方法：

1. 使用浮动（float）：将两个块级元素设置为浮动，并且设置宽度使它们能够在一行显示。例如，给两个块级元素设置`float: left`，并设置合适的宽度。

2. 使用行内块（inline-block）：将两个块级元素设置为行内块元素，这样它们会按照文本的方式排列，并且可以在一行显示。例如，给两个块级元素设置`display: inline-block`。

3. 使用网格布局（grid）：使用CSS网格布局可以更方便地实现多列布局。将容器设置为网格容器，并通过网格属性将两个块级元素放置在同一行。

这些方法都可以使两个块级元素在一行显示，但需要根据具体情况选择合适的方法，并根据需要进行一些样式调整。使用Flex布局可以更直观和灵活地实现这样的布局需求。

相关问题

让两个div中的内容并排显示

让两个`<div>`元素的内容并排显示，通常有几种常见的布局方式：

1. **块级元素**：默认情况下，`<div>`是块级元素，占据一行。如果你想它们并排显示，可以将它们设置为浮动(`float`)、绝对定位(`position: absolute`)或使用Flexbox或Grid布局。

- **浮动**：给每个`<div>`设置`float:left`或`float:right`，它们会从文档流中脱离出来，然后按顺序堆叠在一起。

   <style>
     .container {
       overflow: auto; /* 如果包含溢出内容 */
     }
     .box {
       float: left;
       width: 50%;
       box-sizing: border-box; /* 包含边框和内填充 */
     }
   </style>
   <div class="container">
     <div class="box">div1</div>
     <div class="box">div2</div>
   </div>

2. **Flexbox布局**：通过设置容器的`display: flex`，你可以轻松控制子元素的排列。例如，在`.container`上添加`flex-wrap: wrap`，如果内容超过一列，则子元素换行。

   <style>
     .container {
       display: flex;
       flex-wrap: wrap;
     }
     .box {
       flex: 1; /* 自动分配空间 */
     }
   </style>
   <div class="container">
     <div class="box">div1</div>
     <div class="box">div2</div>
   </div>

3. **Grid布局**：使用CSS Grid可以创建更复杂的网格布局，设定行和列的数量及大小，让元素自动对齐。

   <style>
     .container {
       display: grid;
       grid-template-columns: repeat(2, 1fr); /* 列数和宽度 */
     }
     .box {
       /* 格样式 */
     }
   </style>
   <div class="container">
     <div class="box">div1</div>
     <div class="box">div2</div>
   </div>