Оформление страницы с помощью flexbox

borizzz2018 · January 31, 2019

Всем привет!

Я очень начинающий верстальщик, можно сказать что совсем никакой но тяга к знаниям есть, подскажите пожалуйста как грамотно оформить страничку, расположить графические блоки в столбик, текст должен обтекать слева и справа, пример на скриншоте, как это описать в css? Пробовал через flex все делать но текст либо снизу, либо сверху остается. Спасибо за понимание!)

AlexZaw · January 31, 2019

Примерно так можно:

<div class="wrap">
  <ul>
    <li>
      <div class="empty"></div>
      <img src="http://placekitten.com/200">
      <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repudiandae earum vero fuga maxime deleniti tempora debitis nulla ullam asperiores, eaque dolorum ex facilis soluta, neque suscipit. Dolor, dolores maxime.</div>
    </li>
    <li>
      <div class="empty"></div>
      <img src="http://placekitten.com/200">
      <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repudiandae earum vero fuga maxime deleniti tempora debitis nulla ullam asperiores, eaque dolorum ex facilis soluta, neque suscipit. Dolor, dolores maxime.</div>
    </li>
    <li>
      <div class="empty"></div>
      <img src="http://placekitten.com/200">
      <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repudiandae earum vero fuga maxime deleniti tempora debitis nulla ullam asperiores, eaque dolorum ex facilis soluta, neque suscipit. Dolor, dolores maxime.</div>
    </li>
  </ul>
</div>

.wrap {
  border: 1px solid #000;
  max-width: 800px;
  margin: 0 auto;
}
ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
}
li {
  display: flex;
  align-items: center;
}
li * {
  width: 33.33%;
}
li:nth-child(odd) {
  direction: rtl;
  text-align: right;
}
img {
  border-radius: 50%;
  vertical-align: middle;
}

borizzz2018 · January 31, 2019

Спасибо за ответ!

Я сделал по рукожопски, но работает) можно так делать или лучше не стоит?

.main_about{
height:100vh;
}

.about_text1{
height:180px;
display:flex;
flex-direction:column;
flex-wrap:nowrap;
}
.about_text1 h3{
float:right;
font-size:18px;
text-align:right;
}
.about_text1 p{
float:right;
font-size:16px;
text-align:right;
}
.about_img1{
height:180px;
display:flex;
margin-top:90px;
margin-right:380px;
margin-bottom:100px;
}

.about_text2{
display:flex;
float:right;
flex-direction:column;
flex-wrap:nowrap;
}
.about_text2 h3{
float:left;
font-size:18px;
text-align:left;
}
.about_text2 p{
float:left;
font-size:16px;
text-align:left;
}
.about_img2{
height:auto;
display:flex;
margin-left:380px;
margin-top:10px;
}

AlexZaw · January 31, 2019

1 час назад, borizzz2018 сказал:

можно так делать или лучше не стоит?

Попробуйте адаптировать ваш код для мобильных устройств с разным расширением. С учетом того что количество текста напротив "строк" с картинками может быть разным (количество строк тоже, кстати, может меняться). Желательно еще что бы, промежуточные от основных разрешения, тоже выглядели бы прилично и не рассыпались как попало. Если получиться сделать это с легкостью - все нормально.
Если же возникнут трудности, то так делать не стоит :)

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

borizzz2018 · February 2, 2019

Спасибо за ответ, попробовал Ваш код, все идеально, единственный момент, почему то моё меню съехало (см. скриншот)

Вот код моего меню (использую Bootstrap)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<title>Hello, world!</title>
</head>
<body>
<nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a href="#" class="navbar-brand">
<img src="img/21-mountain-logo-mackup.jpg" width=30 height=30 alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-control="navbarSupportedControl" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a href="#" class="link">Home</a>
<li class="nav-item ">
<a href="#" class="link">Price</a>
<li class="nav-item ">
<a href="#" class="link">About us</a>
<li class="nav-item ">
<a href="#" class="link">Contact us</a>
</li>
</ul>

</div>
</nav>
</nav>

borizzz2018 · February 7, 2019

Для продолжения темы, пробую верстать адаптивно, с помощью Bootstrap 4, вопрос в следующем, сайт разделен на секции, на первой секции стоит бэкграунд картинка, на второй, просто белый фон, на третьей тоже должна стоять картинка. но картинка стоит не по ширине секции, по бокам белые полосы (см.скриншот), как это исправить?

Sign In

Оформление страницы с помощью flexbox

Question

borizzz2018

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

AlexZaw

Link to comment

Share on other sites

borizzz2018

Link to comment

Share on other sites

AlexZaw

Link to comment

Share on other sites

borizzz2018

Link to comment

Share on other sites

borizzz2018

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information