(CSS) Как сделать сетку из строки с тремя элементами?

Question

Я только начинаю изучать секреты flexbox, но не выходит сделать отзывчивую вёрстку блока, в котором есть заголовок, текст и кнопка. Искал информацию, пробовал что можно, но всё ещё остался один и тот же вопрос: как решить эту задачу правильно, а самое главное - грамотно.

Вот как оно пока что выглядит:

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrapper {
  max-width: 942px;
  margin: 0 auto;
  padding: 0 15px;
}

.capabilities {
  display: flex;
  margin-top: 119px;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.capabilities .title {
  width: 199px;
  height: 36px;
  float: left;
}

.capabilities h3 {
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 2.31px;
  margin: 0;
  padding-bottom: 10px;
}

.capabilities hr {
  width: 50px;
  float: left;
  padding: 0;
  margin: 0;
  border: 1px solid #00A4E5;
}

.capabilities a {
  font-size: 11px;
  width: 405px;
  line-height: 19px;
  padding: 0;
  margin: 0;
}

.capabilities button {
  width: 150px;
  height: 40px;
  border: 0;
  font-size: 13px;
  text-align: center;
  vertical-align: middle;
}

<div class="capabilities">
  <div class="wrapper">
    <div class="title">
      <h3>Our Capabilities</h3>
      <hr>
    </div>
    <a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</a>
    <button>All Services</button>
  </div>
</div>

P.S. В коде убраны незначительные свойства, которые не требуют внимания для решения, дабы всё было более читабельнее (цвет фона, шрифт, скорость анимации при наведении и тому подобное).

Заранее огромно благодарю!

Answer 1

В примере видно, что display:flex устанавливается элементу .capabilities, в котором лежит всего один элемент wrapper.

display:flex влияет только на расположение дочерних элементов, в данном случае элемент wrapper

Соответственно, для решения достаточно либо убрать промежуточный элемент, либо наоборот: установить display:flex и ему тоже

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrapper {
  max-width: 942px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
}

.capabilities {
  display: flex;
  margin-top: 119px;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.capabilities .title {
  width: 199px;
  height: 36px;
  float: left;
}

.capabilities h3 {
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 2.31px;
  margin: 0;
  padding-bottom: 10px;
}

.capabilities hr {
  width: 50px;
  float: left;
  padding: 0;
  margin: 0;
  border: 1px solid #00A4E5;
}

.capabilities a {
  font-size: 11px;
  width: 405px;
  line-height: 19px;
  padding: 0;
  margin: 0;
}

.capabilities button {
  width: 150px;
  height: 40px;
  border: 0;
  font-size: 13px;
  text-align: center;
  vertical-align: middle;
}

<div class="capabilities">
  <div class="wrapper">
    <div class="title">
      <h3>Our Capabilities</h3>
      <hr>
    </div>
    <a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</a>
    <button>All Services</button>
  </div>
</div>

БЛОГ НА HUSL

(CSS) Как сделать сетку из строки с тремя элементами?

Ответы (1 шт):