Создание макета с помощью Flexbox

эй, я новичок в Flexbox, и я стараюсь получить его как можно лучше. Однако я столкнулся с проблемой с некоторыми высотами и заказами, возможно, некоторые здесь могут помочь.

Примечание: Пожалуйста, не предлагайте использовать сетку / таблицы.

это то что у меня Сейчас: Создание макета с помощью Flexbox

это то что я хочу получить: Создание макета с помощью Flexbox

html:

<div class = "movie-container">

<div class = "upper-container">

  <div class = "image">Image</div>
  <div class = "title">Title</div>
  <div class = "more">More</div>

</div>
<div class = "lower-container">

  <div class = "runtime">Runtime</div>
  <div class = "description">Description</div>
  <div class = "director">Director</div>

</div>
</div>

css:

.movie-container{
    display:flex;
    flex-flow: column wrap;
}

.upper-container {
    display: flex;
    width:80%;
    margin:0 auto;
    flex-flow: raw wrap;

}

.upper-container div {
    border: 1px solid black;
    padding: 10px;
}
.lower-container {
    display: flex;
    width:80%;
    margin:0 auto;
    flex-flow: column wrap;
}

.lower-container div {
    border: 1px solid black;
    padding: 10px;   
}
.image {
    flex: 1;
}

.title {
    flex: 3;
}

.more {
    flex: 0.1;
}
.runtime{ 
}
.description{

}
.director{
}

Может быть, помимо flexbox нужно добавить что-то еще, я не уверен, поэтому и спрашиваю здесь. Любое решение будет полезным!

html css angular sass flexbox

07.10.2018 21:41

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Если вы немного измените структуру HTML, вы можете сделать это довольно легко:

<div class = "movie-container">
    <div class = "upper-container">
        <div class = "image">Image</div>

        <div class = "side-container">
            <div class = "title">Title</div>
            <div class = "more">More</div>
            <div class = "runtime">Runtime</div>
            <div class = "description">Description</div>
        </div>
    </div>

    <div class = "lower-container">
        <div class = "director">Director</div>
    </div>
</div>

JSFiddle

Flex не очень хорош в растягивании на несколько строк / столбцов, таких как таблицы или Grid, хотя вы заявляете, что не хотите этого решения, обычно это лучший вариант в подобных случаях.

07.10.2018 22:05

Я считаю, что с flexbox проще всего работать построчно, а не использовать обертку (хотя вы, конечно, тоже можете это сделать).

В качестве отправной точки, я думаю, этот фрагмент - то, что вы собираетесь делать?

div {
  flex: 1 1 auto;
}

.box {
  border: 1px solid black;
}

.flex {
  display: flex;
}

.image {
  width: 120px;
  flex: 0 0 auto;
}

.more {
  flex: 0 0 auto;
}

<div class = "flex upper">
  <div class = "box flex image">Image</div>
  <div class = "upper-detail">
    <div class = "flex title-container">
      <div class = "box title">Title</div>
      <div class = "box more">More</div>
    </div>
    <div class = "box runetime">Runtime</div>
    <div class = "box director">Director</div>
  </div>
</div>
<div class = "box description">Description</div>
<div class = "box other">Other stuff...</div>

07.10.2018 22:07

Надеюсь это поможет.

.upper-container{
  display: flex;
  height: 200px;
}

.upper-left{
  background: #ddd;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upper-right{
flex: 3;
display: flex;
flex-direction: column;
height: 100%;
}

.title-more, .runtime, .director{
  flex: 1;
  border: 1px solid #222;
  display: flex;
  align-items: center;
}

.lower-container{
  border: 1px solid #222;
  padding: 10px;
}

.title-more{
  justify-content: space-between;
}

.more-button{
  height: 30px;
  width: 100px;
  border: 1px solid #333;
  margin-right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class = "movie-container">
  <div class = "upper-container">
    <div class = "upper-left">
      Image
    </div>
    <div class = "upper-right">
       <div class = "title-more">
          <div class = "title-container">
            Title
          </div>
          <div class = "more-button">
            More
          </div>
       </div>
       <div class = "runtime">Runtime</div>
       <div class = "director">Director</div>
    </div>
  </div>
  <div class = "lower-container">
      Description
  </div>
</div>

07.10.2018 22:16

Ключ состоит в том, чтобы добавить некоторые div и удалить некоторые другие:

.movie-container *{padding:.5em;}

.upper-container {
  display: flex;
  padding:0;
}

.image {
  border: 1px solid;
  flex: 1 1 25%;
}

.tmrd{flex: 1 1 75%;padding:0}

.title-more {
  display: flex;
  padding:0;
}

.title{flex: 1 1 75%;border: 1px solid;}
.more{flex: 1 1 25%;border: 1px solid;}

.runtime,.description,.director{border: 1px solid;}

<div class = "movie-container">

  <div class = "upper-container">

    <div class = "image">Image</div>

    <div class = "tmrd">
      <div class = "title-more">
        <div class = "title">Title</div>
        <div class = "more">More</div>
      </div>
      <div class = "runtime">Runtime</div>
      <div class = "description">Description</div>
    </div>
  </div>

  <div class = "director">Director</div>

</div>

07.10.2018 22:28

Другие вопросы по теме

Как я могу добавить к этой кнопке CSS-анимацию?

Изменить CSS элемента, посещенного якорем

Как получить фоновое изображение заголовка с помощью vh?

Возможно ли, что LXML может определить, какое значение имеет класс в HTML?

Высота вложенных div и переполнение

Добавить стиль css в шаблон веточки (стиль найденного класса не применяется)

Использование :: after для ссылок в тексте, но исключение связанных изображений

Изображение масштабируется по-разному в зависимости от браузера, если используется свойство display flex

Раскрывающееся меню HTML

Justify-content для центрирования с помощью Flex Box

Создание макета с помощью Flexbox

Ответы 4

Другие вопросы по теме

Похожие вопросы