Совместите изображения слева и справа

Question

Не нашел ответа на SO. Я хочу перечислить изображения, которые я получаю слева и справа. Изображения не имеют фиксированного размера. Я не знаю, является ли это правильным способом сделать это. Мой файл html выглядит следующим образом:

<div class="six">
        <ul><img class="left" src=""  width=250/></ul>
        <ul><img class="left" src=""  width=250/></ul>
        <ul><img class="left" src=""  width=250/></ul>

            <div align="center">
                <h1>Pictures</h1>
                <input type="text" id="gif">
                <button id="sbmt">Submit</button>
                <img src=""  width=250/>
            <div>

        <ul><img  class="right" src=""  width=250/></ul>
        <ul><img  class="right" src=""  width=250/></ul>
        <ul><img  class="right" src=""  width=250/></ul>
    </div>

Мой текущий файл css выглядит следующим образом:

.left{
    align-content: left;
    width:fit-content
  }

.right{
    align-content: right;
    width: fit-content;
}

Приведенный выше код пытается упорядочить изображения, как показано ниже. Но, очевидно, я делаю ошибку. Я искал около часа и пробовал различные «ТАК трюки». Это просто не сработает.

Answer 1

Я бы go с flexbox на этом. Вы можете использовать это, а затем вставлять свои изображения внутри каждого из шести делений:

.flex-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.flex-column {
    flex-direction: column;
    display: flex;
}

.flex-row {
    flex-direction: row;
    display: flex;
    align-items: center;
    text-align: center;
}

.flex-body div:not([class*="flex"]) {
    border: 1px solid white;
    flex: 1 1 200px;
    width: 500px;
}

<div class="flex-body">
  <div class="flex-column">
    <div style="background: #555;"><!-- Image here --></div>
    <div style="background: #555;"><!-- Image here --></div>
    <div style="background: #555;"><!-- Image here --></div>
  </div>
  <div class="flex-row">
    <div style="background: #fff;">
      <h1>Pictures</h1>
        <input type="text" id="gif">
        <button id="sbmt">Submit</button>
        <img src="" width="250px"/>
    </div>
  </div>
  <div class="flex-column">
    <div style="background: #555;"><!-- Image here --></div>
    <div style="background: #555;"><!-- Image here --></div>
    <div style="background: #555;"><!-- Image here --></div>
  </div>
</div>