Is it possible to start the first row on second colum and end with third column in flex-box?-CodePudding

Is it possible to make single 2 rows with 3 column without adding any additional elements in flex or any other suitable way?

.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>

here is the requirement:

CodePudding user response：

Solution with flexbox.

Need to define in .child2 class, 3 columns. For the checkbox 40px, the main content and for button 60px.
Using webkit-line-clamp: 3 to set the line limits
Calculate the width with calc() for .child1 to determine the same width as the main content in .child2. And shift content with margin-left: 40px
For easy to use, we use css variables

Show code snippet

*,
::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>

CodePudding user response：

this is really hard with flexbox as it's not really designed for this. my favorite flexbox helper: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

You're much better off using grid for this: 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>

Dirty design but does what you want

CodePudding user response：

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;;
}

Final: Picture