Вопрос:

Проблема с макетом CSS и Flexbox

html css flexbox

40 просмотра

4 ответа

123 Репутация автора

Создан кодекс по адресу http://codepen.io/cbireddy/pen/vmYxbz

.board {
      display: flex;
      width: 600px;
      height: 400px;
      justify-content: flex-start;
      flex-flow: row wrap;
    }
    
    .square {
      width: 200px;
      height: 200px;
      border: 5px solid black;
      border-radius: 10px;
    }
<div class="=board">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>

Я думал, что квадраты должны быть в матрице 2х3. Вместо этого они все сложены вертикально. Что мне не хватает? Мысль, что дисплей: flex будет выравнивать элементы вдоль главной оси, которая является горизонтальной.

Может кто-нибудь, пожалуйста, посмотрите на это и скажите мне, что я делаю не так? Цель состоит в том, чтобы визуализировать квадраты в матрице 2х3.

-Благодарю Чакри

Автор: Chakri Bireddy Источник Размещён: 12.04.2017 05:08

Ответы (4)


1 плюс

1067 Репутация автора

В строке 24 вашего HTML (в Codepen) у вас есть опечатка. Просто измените <div class="=board">на<div class="board">

Автор: IiroP Размещён: 12.04.2017 05:12

1 плюс

21 Репутация автора

<div class="=board">

Замени это

<div class="board">

Должен сделать свое дело.

Автор: Leon Thierschmidt Размещён: 12.04.2017 05:13

0 плюса

1352 Репутация автора

Попробуйте этот код

.board {
  display: flex;
  width: 600px;
  height: 400px;
  justify-content: flex-start;
  flex-flow: row wrap;
}

.square {
  width: 200px;
  height: 200px;
  border: 5px solid black;
  border-radius: 10px;
}
<div class="board">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

Автор: Momin Размещён: 12.04.2017 05:16

2 плюса

44209 Репутация автора

Решение

Вам нужно исправить опечатку и добавить box-sizing: border-boxк ней, .squareчтобы границы не выходили за пределы определенной ширины.

.board {
  display: flex;
  width: 600px;
  height: 400px;
  justify-content: flex-start;
  flex-flow: row wrap;
}

.square {
  width: 200px;
  height: 200px;
  border: 5px solid black;
  border-radius: 10px;
  box-sizing: border-box;
}
<div class="board">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

Автор: Michael Coker Размещён: 12.04.2017 05:22
Вопросы из категории :
32x32