Блог

Главная - Вопросы по программированию - Можно ли начать первую строку со второго столбца и закончить третьим столбцом в flex-box?

Можно ли начать первую строку со второго столбца и закончить третьим столбцом в flex-box?

#html #css

Вопрос:

Можно ли сделать отдельные 2 строки с 3 столбцами без добавления каких-либо дополнительных элементов flex или любым другим подходящим способом?

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

.child1{
  background:lightblue;
}

.child2{
display:flex;
border:1px solid red;
}

.child2 div{
flex:1;
background:green;
} 
 <div class="parent">
 <div class="child1">it should start in 2nd column and end with 3 column</div>
 <div class="child2">
  <input type="checkbox" />
  <div>some test goes here </div>
  <button>button 2</button>
 </div>
</div>

вот требование:

гибкий как колонна

Ответ №1:

Решение с помощью flexbox.

  1. Нужно определить в .child2 классе 3 столбца. Для флажка 40 пикселей, основного содержимого и для кнопки 60 пикселей.
  2. Используется webkit-line-clamp: 3 для установки границ линий
  3. Рассчитайте ширину с calc() помощью for .child1 , чтобы определить ту же ширину, что и основное содержимое .child2 . И переключить контент с margin-left: 40px
  4. Для удобства использования мы используем переменные css
 *,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

:root {
  --input-width: 40px;
  --button-width: 60px;
}

body {
  display: grid;
  place-items: center;
  background-color: hsl(215, 100%, 98%);
  position: relative;
  overflow-x: hidden;
}

.parent {
  max-width: 400px;
  display: flex;
  flex-direction: column;
}

.child1 {
  width: calc(100% - var(--input-width) - var(--button-width));
  display: flex;
  padding: 0.5em 0;
  margin-left: var(--input-width);
  color: gray;
}

.child2 {
  display: flex;
}

.child2 input {
  flex: 1 0 var(--input-width);
}

.child2 div {
  flex: 0 1 auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.child2 button {
  flex: 1 0 var(--button-width);
} 
 <div class="parent">
  <div class="child1">23-Oct-2019, 8:00 AM</div>
  <div class="child2">
    <input type="checkbox" />
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A optio quod recusandae cupiditate, dolores consectetur nihil veritatis doloremque nam, maxime itaque omnis? Voluptatem ratione consequuntur animi aliquam expedita eos alias. Ipsum consequuntur
      laborum ipsa labore autem accusamus mollitia minima placeat harum, odio explicabo eaque aliquam adipisci consectetur delectus praesentium nemo. Odio eos ex, autem quam alias molestias ab quae temporibus.
    </div>
    <button>button 2</button>
  </div>
</div>

Ответ №2:

это действительно сложно с flexbox, так как он на самом деле не предназначен для этого. мой любимый помощник по flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Для этого вам гораздо лучше использовать сетку: https://css-tricks.com/snippets/css/complete-guide-grid/

 .parent {
  display: grid ;
  grid-template-columns: 1fr 4fr 2fr;
  grid-template-rows: 1fr 3fr
}

.child1 {
  background: lightblue;
}

.child2 {
  border: 1px solid red;
  background: green;
} 
 <div class="parent">
  <div class="item"></div>
  <div class="item child1">it should start in 2nd column and end with 3 column</div>
  <div class="item"></div>
  <div class="item child2">
    <input type="checkbox" />
  </div>
  <div class="item">some test goes here </div>
  <button class="item">button 2</button>
</div>

Грязный дизайн, но делает то, что вы хотите

Комментарии:

1. Мое главное намерение-избежать пустоты div , которая связана с доступностью.

Ответ №3:

HTML :

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

  <div class="date">
    23-October 2019 , 8:00 AM
  </div>

<div class="input">
<input type="checkbox">
</div>

<div class="text"> 
  Lorem ipsum dolor sit amet, consecte <br> tur adpiscinc elit, sed do eiusmod te <br> sed 
  do eiusmod te sed do...
  
</div>

<div class="final">
  Service : Platform Service
</div>



</body>
</html>

CSS:

 .date{
  font-size: small;
  padding-top: 5px;
  padding-bottom: 10px;
  padding-left: 37px;   
}

.input{
  margin-left: 8px;
  float: left;
}

.text{
  display: inline-block;
  padding-left: 10px;
}

.final{
display: block;
padding-left: 37px;
padding-top: 10px;;
}

Финал:
Изображение

Метки: