Can the first row of a flex-box begin in the second column and end in the third column?

Question

Can the first row of a flex-box begin in the second column and end in the third column?

Can a layout be created with two rows and three columns without adding any extra elements using the flex property or any other method?

.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 what is needed:

https://i.sstatic.net/IELvO.jpg

html css

Answer 1

Answer №1

Approach utilizing flexbox.

Define 3 columns in the .child2 class: 40px for the checkbox, the main content, and 60px for the button.
Implement webkit-line-clamp: 3 to set line limits.
Utilize calc() to calculate the width of .child1 so it matches the main content width in .child2. Adjust content alignment with margin-left: 40px.
Make use of CSS variables for ease of adjustment.

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

Answer 2

Approach utilizing flexbox.

Define 3 columns in the .child2 class: 40px for the checkbox, the main content, and 60px for the button.
Implement webkit-line-clamp: 3 to set line limits.
Utilize calc() to calculate the width of .child1 so it matches the main content width in .child2. Adjust content alignment with margin-left: 40px.
Make use of CSS variables for ease of adjustment.

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

Answer 3

Answer №2

Implementing this layout with flexbox can be quite challenging as it is not its primary use. A helpful resource for flexbox is available at: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

For a more suitable approach, consider utilizing grid instead: 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>

This design may not be perfect, but it achieves the desired outcome

Answer 4

Implementing this layout with flexbox can be quite challenging as it is not its primary use. A helpful resource for flexbox is available at: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

For a more suitable approach, consider utilizing grid instead: 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>

This design may not be perfect, but it achieves the desired outcome

Answer 5

Answer №3

HTML Code:

<!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 Styles:

.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 Output: View Image

Answer 6

HTML Code:

<!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 Styles:

.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 Output: View Image

Can the first row of a flex-box begin in the second column and end in the third column?

Answer №1

Answer №2

Answer №3

Similar questions

Struggling with integrating HTML Canvas within Vue.js

What steps should I take to get my fixed position to function properly in Internet Explorer 6?

Addressing Layout Problems When I Enlarge the Browser Width

After incorporating an additional element, the li:nth-child(odd) selector is no longer functioning correctly

The eot file converted online is not functioning as expected

Unusual display of fonts on Chrome

Transmitting HTML through a Java socket connection

Guide to sending multiple checkboxes using jQuery AJAX in CodeIgniter

Is it possible for me to use AJAX to load content from a string? I am attempting to postpone the activation of certain HTML

Hosting services and content management system for a website built with Twitter Bootstrap

Show a different image with a matching title each time the page loads

Css styling for text highlighting

Retrieve a time stamp value from a database and showcase it using jQuery

The Javascript function is designed to function exclusively with onclick events or setTimeout functions

Utilizing Jquery to Integrate Hashtags

Is there a substitute for bootstrap select in Rails?

Creating unique ID tags using AngularJS

Guiding motion of a parental container using a button

CSS Positioning: the container is not the right size for its content dimensions

The Angular HTML Autocomplete feature is not functioning as intended when hosted on a CDN in Chrome, despite setting it to "nope" or "off"