使第一个元素为全宽，其余为一行

Question

我正在尝试创建一种看起来像这样的子网格：

第一个元素应该是全宽度，其余元素必须在同一条线上（每个元素的宽度相同），无论存在多少个项目。

我的尝试：

HTML

<Grid Background="Azure">
        <Grid.RowDefinitions>
            <RowDefinition Height="13.1578*"/>
            <RowDefinition Height="4.8157*"/>
            <RowDefinition Height="13.1578*"/>
            <RowDefinition Height="4.8157*"/>
            <RowDefinition Height="13.1578*"/>
            <RowDefinition Height="4.8157*"/>
            <RowDefinition Height="13.1578*"/>
            <RowDefinition Height="4.8157*"/>
            <RowDefinition Height="13.1578*"/>
            <RowDefinition Height="4.8157*"/>
            <RowDefinition Height="18.4210*"/>
            <RowDefinition Height="4.8157*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="5*"/>
            <ColumnDefinition Width="90*"/>
            <ColumnDefinition Width="5*"/>
        </Grid.ColumnDefinitions>

        <Grid Grid.Row="0" 
              Grid.RowSpan="12" 
              Grid.Column="0" 
              Grid.ColumnSpan="3">
            <Border BorderBrush="Black" 
                    BorderThickness="1"/>
        </Grid>
        <TextBox x:Name="txt_1" 
                 Controls:TextBoxHelper.Watermark="Textbox 1" 
                 Style="{x:Null}" 
                 Grid.Row="2" 
                 Grid.Column="1"/>
        <TextBox x:Name="txt_2" 
                 Controls:TextBoxHelper.Watermark="Textbox 2" 
                 Style="{x:Null}" 
                 TextWrapping="Wrap" 
                 Grid.Row="4" 
                 Grid.Column="1"/>
        <TextBox x:Name="txt_3" 
                 Controls:TextBoxHelper.Watermark="Textbox 3" 
                 Style="{x:Null}" 
                 TextWrapping="Wrap" 
                 Grid.Row="6" 
                 Grid.Column="1"/>
        <TextBox x:Name="txt_4" 
                 Controls:TextBoxHelper.Watermark="Textbox 4" 
                 VerticalAlignment="Stretch" 
                 TextWrapping="Wrap" 
                 Grid.Row="8" 
                 Grid.Column="1"/>
        <Grid Grid.Row="10" 
              Grid.Column="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="32.5*"/>
                <ColumnDefinition Width="35*"/>
                <ColumnDefinition Width="32.5*"/>
            </Grid.ColumnDefinitions>
        <Button x:Name="btn_add" 
                Content="Add" 
                Grid.Row="8" 
                Grid.Column="1" 
                Click="btn_add_Click"/>
        </Grid>
       <StackPanel Background="#C0F368" 
                   Grid.Row="0" 
                   Grid.Column="0" 
                   Grid.ColumnSpan="3">
    </Grid>`

CSS

<div class="flex-container">
    <div class="flex-item">I'm the biggest!</div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
</div>

我是flex的新手，因此，在我的新手抽象中，理论上这应该有效，但事实并非如此。它使所有.flex-container { display: flex; flex-wrap: wrap; } .flex-container .flex-item { flex: 1; } .flex-container .flex-item:first-child { width: 100%; } 在相同的行中具有相同的宽度（我希望发生这种情况，但只能使用.flex-item flex dudes）。

Answer 1

这会尝试将所有下属项目保留在一行中。

请参阅CSS中的注释

＆＃13;

＆＃13;

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-container .flex-item {
  background-color: #d94a6a;
  flex: 1 1 0;                                       /*  for 2nd line to not wrap  */
  margin: 0 1px;                                                
  overflow: hidden;                                  /*  for 2nd line to not wrap  */
  min-height: 75px;
  text-align: center;
  -webkit-box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);
  -moz-box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);
  box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);
}

.flex-container .flex-item:nth-child(1) {
  background-color: #3b5bb2;
  flex-basis: 100%;                                  /*  make first take full width  */
  min-height: 400px;
  margin-bottom: 20px;
}

＆＃13;

<div class="flex-container">
    <div class="flex-item">I'm the biggest!</div>
    <div class="flex-item">#2</div>
    <div class="flex-item">#3</div>
    <div class="flex-item">#4</div>
    <div class="flex-item">#5</div>
    <div class="flex-item">#6</div>
    <div class="flex-item">#7</div>
</div>

＆＃13;

＆＃13;

＆＃13;