Modify behaviour of CSS after wrap

Modify behaviour of CSS after wrap - css

As you can see the image on the left sticks to the right div, but once the right div wraps and puts under the picture, the image stays on the left. I would like to have the picture and the second div (below, after wrapping) in the same size, just matching the horizontal size.
(For some reason the picture is not displayed, but it is a 800x500px picture).
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #91897b;
}
::-webkit-scrollbar-track:hover {
background: #ccb288;
}
::-webkit-scrollbar-thumb {
background: #e8aa45;
}
::-webkit-scrollbar-thumb:hover {
background: #f4a11a;
}
img {
max-width:100%;
max-height:500px;
}
.flex-container {
display: flex;
background-color: DodgerBlue;
flex-direction: row;
flex-wrap: wrap;
flex-grow:1;
}
.flex-container > div {
background-color: #fafafa;
width:auto;
height:100%margin: 1px;
font-size: 30px;
}
.caja-scroll{
overflow-y:auto;
background-color:#fafafa;
border-color: coral;
width:100%;
height:100%;
max-width:100%;
max-height:500px;
flex-shrink:5;
}
.bordes_gallery {
border-style:solid;
max-width:100%;
flex-grow: 1;
margin: 1px;
}
.gallery_item {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
max-height:100px;
border-style:dotted;
}
.gallery_item > #imagen {
order: 1;
flex-basis: 100px;
align-items:center;
justify-content:center;
}
.gallery_item > #texto {
order: 2;
align-items:center;
justify-content:center;
margin-left:5px;
}
<body>
<div class="flex-container">
<div style="order: 1; flex-basis: content; align-items:center; justify-content:flex-start; display: flex;">
<img src="http://kb4images.com/images/usa-wallpaper/36955559-usa-wallpaper.jpg"></img>
</div>
<div style="order: 2; flex-grow: 1; flex-basis: 28rem; max-height:500px; justify-content:flex-start; flex-shrink: 0;">
<div class="caja-scroll">
<div class="col-md-12 bordes_gallery">
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
</div>
</div>
</div>
</body>

Does this work for you ?
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #91897b;
}
::-webkit-scrollbar-track:hover {
background: #ccb288;
}
::-webkit-scrollbar-thumb {
background: #e8aa45;
}
::-webkit-scrollbar-thumb:hover {
background: #f4a11a;
}
img {
max-width:100%;
max-height:500px;
}
.flex-container {
display: flex;
background-color: DodgerBlue;
flex-direction: row;
flex-wrap: wrap;
flex-grow:1;
}
.flex-container > div {
background-color: #fafafa;
width:auto;
height:100%margin: 1px;
font-size: 30px;
}
.caja-scroll{
overflow-y:auto;
background-color:#fafafa;
border-color: coral;
width:100%;
height:100%;
max-width:100%;
max-height:500px;
flex-shrink:5;
}
.bordes_gallery {
border-style:solid;
max-width:100%;
flex-grow: 1;
margin: 1px;
}
.gallery_item {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
max-height:100px;
border-style:dotted;
}
.gallery_item > #imagen {
order: 1;
flex-basis: 100px;
align-items:center;
justify-content:center;
}
.gallery_item > #texto {
order: 2;
align-items:center;
justify-content:center;
margin-left:5px;
}
#media screen and ( max-width: 1263px) {
.flex-container>div:nth-child(1){width:100%;}
.flex-container>div:nth-child(1)>img{width:100%;}
.flex-container {max-width:800px; margin: auto;}
}
<div class="flex-container">
<div style="order: 1; flex-basis: content; align-items:center; justify-content:flex-start; display: flex;">
<img src="http://kb4images.com/images/usa-wallpaper/36955559-usa-wallpaper.jpg"></img>
</div>
<div style="order: 2; flex-grow: 1; flex-basis: 28rem; max-height:500px; justify-content:flex-start; flex-shrink: 0;">
<div class="caja-scroll">
<div class="col-md-12 bordes_gallery">
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
</div>
</div>
</div>

I reworked the whole code from scratch and I got working what I wanted.
Here it is the result.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #91897b;
}
::-webkit-scrollbar-track:hover {
background: #ccb288;
}
::-webkit-scrollbar-thumb {
background: #e8aa45;
}
::-webkit-scrollbar-thumb:hover {
background: #f4a11a;
}
#media only screen and (min-width:1110px){
.galeria {
-webkit-box-sizing: border-box;
border-style:solid;
border-color:#45df43;
max-width:1110px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
}
}
#media only screen and (max-width:1109px){
.galeria{
border-style:solid;
border-color:#45df43;
max-width:1110px;
display:flex;
flex-direction:column;
flex-wrap:wrap;
justify-content:center;
}
.contenedor_der{
max-height:490px;
flex-basis:content;
width:100%;
max-width:666px;
margin: 0 auto;
flex: 1;
}
.contenedor_izq{
flex-basis:content;
max-width:666px;
margin: 0 auto;
border-style:solid;
border-color:#df43df;
flex:1;
}
.contenedor_izq img{
max-width:666px;
width:100%;
}
}
.contenedor_izq{
border-style:solid;
border-color:#df43df;
flex-basis:content;
}
.contenedor_izq img{
max-width:666px;
flex:1;
}
.contenedor_der{
max-height:416.25px;
overflow-y:scroll;
border-style:solid;
flex:1 1 auto;
}
.caja_articulo{
width:99%; /*Debido a scroll bar que ocupa 10px */
min-width:auto;
height:100px;
border-style: solid;
}
.imagen_articulo{
-webkit-box-sizing: border-box;
float:left;
width:auto;
height:auto;
}
.imagen_articulo img{
max-width:100px;
}
.filas_texto{
-webkit-box-sizing: border-box;
margin-left:100px;
width:auto;
min-width:100px;
height:50%;
border-style: solid;
border-color:#f505d5;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Editor JavaScript online - www.cubicfactory.com</title>
</head>
<body>
<div class="galeria">
<div class="contenedor_izq">
<img src="http://www.hyattrestaurants.com/wp-content/uploads/2015/06/Collage-800x500px.jpg">
</div>
<div class="contenedor_der">
<div class="caja_articulo">
<div class="imagen_articulo">
<img src=" https://upload.wikimedia.org/wikipedia/commons/4/4f/Gallet_clamshell_600x600_2.jpg">
</div>
<div class="filas_texto"></div>
<div class="filas_texto"></div>
</div>
<div class="caja_articulo">
<div class="imagen_articulo">
<img src=" https://upload.wikimedia.org/wikipedia/commons/4/4f/Gallet_clamshell_600x600_2.jpg">
</div>
<div class="filas_texto"></div>
<div class="filas_texto"></div>
</div>
<div class="caja_articulo">
<div class="imagen_articulo">
<img src=" https://upload.wikimedia.org/wikipedia/commons/4/4f/Gallet_clamshell_600x600_2.jpg">
</div>
<div class="filas_texto"></div>
<div class="filas_texto"></div>
</div>
<div class="caja_articulo">
<div class="imagen_articulo">
<img src=" https://upload.wikimedia.org/wikipedia/commons/4/4f/Gallet_clamshell_600x600_2.jpg">
</div>
<div class="filas_texto"></div>
<div class="filas_texto"></div>
</div>
<div class="caja_articulo">
<div class="imagen_articulo">
<img src=" https://upload.wikimedia.org/wikipedia/commons/4/4f/Gallet_clamshell_600x600_2.jpg">
</div>
<div class="filas_texto"></div>
<div class="filas_texto"></div>
</div>
</div>
</div>
</body>
</html>

Related

How to prevent the element go outside the div [duplicate]

This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 1 year ago.
how do I make the three images on the top not go outside the div while keeping them to be 100% width so that their size remains the same and will be resized based on the browser size?
PS: I need them to be in row form
The ideal result should be like this:
#main {
background-color: #666666;
padding: 60px;
width: 390px;
}
#second {
display: flex;
flex-direction: row;
width: 100%;
margin-bottom: 30px;
}
.img-child {
width: 100%;
margin-right: 30px;
}
.img-child:last-child {
margin-right: 0;
}
#img-parent {
width: 100%;
}
<div id=main>
<div id=second>
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>

you need to add a min-width to your image. flex needs this for whatever reason, otherwise it will not downscale the elements. I come across this every time i use flex :D
.img-child {
min-width: 0;
width: 100%;
margin-right: 30px;
}

Try this :
body
{
height:100vh;
justify-content:center;
align-items:center;
display:flex;
}
#main {
width:391px;
background-color: #666666;
}
#main .img
{
width:100px;
float:left;
margin:15px;
}
#main .img:nth-child(4)
{
width:360px;
}
img
{
max-width:100%;
}
<div id=main>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
</div>

You can use max-width for each img.
I have edited your code for calculate padding each image below...
#main {
background-color: #666666;
padding: 60px;
width: 390px;
}
#second > div {
flex-basis: 100%;
flex-grow:1;
flex-shrink: 1;
padding-left: 15px;
padding-right:15px;
max-width:100%;
}
.img-child {
max-width:100%;
}
#second {
display: flex;
flex-direction: row;
margin-bottom: 30px;
margin-left:-15px;
margin-right:-15px;
}
#img-parent {
width: 100%;
}
<div id=main>
<div id=second>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>

#second{
display: flex;
align-items: center;
justify-content: space-around;
}
.img-child{
width: 30%;
margin-top: 30px;
margin-bottom: 30px;
}
#img-parent{
width: 97%;
margin-left: 12px;
}
<div id=main>
<div id=second>
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>

* {
box-sizing: border-box;
}
.main {
background-color: #666666;
padding: 60px;
width: 100%;
}
.second {
background-color: #666666;
display: flex;
flex-direction: row;
margin-bottom: 10px;
}
.column {
float: left;
width: 33.3%;
padding: 5px;
}
.largep {
background-color: #666666;
display: flex;
flex-direction: row;
width: 100%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">
<style>
</style>
</head>
<body>
<div class="row main">
<div class="column second">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column second">
<img src="https://www.w3schools.com/howto/img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column second">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
<div class="largep">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>

Flexbox make columns equal heights

I am trying to get 3 columns in a row and be the same height.
I am using the HTML/CSS below. I can't figure out why the boxes arent the same height.
.container {
text-align: center;
display: block;
width: 100%;
}
.grid {
width: 100%;
height: 100%;
}
.row {
display: flex;
height: 100%;
flex-direction: row;
}
.col {
background: #444;
padding: 2em;
flex: 1;
height: 100%;
border: 1px solid blue;
}
<div class="container">
<div class="data">
<div class="grid">
<div class="row">
<div class="col">
<p>col 1</p>
</div>
<div class="col">
<p>col </br>2</p>
</div>
<div class="col">
<p>col 3</p>
</div>
</div>
</div>
</div>
</div>
How can I make the boxes all the same height. thanks

Simply, remove the height: 100% from .col.
flex: 1; will do the job.
.row {
display: flex;
}
.col {
flex: 1;
background: #444;
padding: 2em;
border: 1px solid blue;
text-align: center;
}
<div class="container">
<div class="data">
<div class="grid">
<div class="row">
<div class="col">
<p>col 1</p>
</div>
<div class="col">
<p>col </br>2</p>
</div>
<div class="col">
<p>col 3</p>
</div>
</div>
</div>
</div>
</div>

Force a block towards the left

In fact, I would like to put my elements towards the left as below:
On my second_text class, I added text-align: left; but I always have the same problem.
.second_text{
padding-top: 10px;
text-align: left;
}
It is possible to force the block to left?
body{
padding-top:200px;
}
.container{
width: 95%;
margin: 0 auto;
}
.row{
display: flex;
padding-left: 20px;
padding-bottom:50px;
padding-top: 50px;
margin-left: 10%;
}
.img-block{
width: 4%;
}
.wrapper{
display: flex;
flex-direction: column;
padding-left: 15px;
}
.title{
padding-bottom: 10px;
}
.vertical{
border-left: 1px solid black;
height: 60px;
margin-left: 20px;
}
.img-block {
height: 28px;
padding-left: 15px;
width: 50px;
display: inline-block;
}
.img-pic{
display: inline-block;
height: 20px;
}
.second_text{
padding-top: 10px;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
<div class="container">
<div class="row">
<img class="img-block" src="https://zupimages.net/up/20/21/mz4v.png" alt="image"/>
<div class="wrapper">
<div class="title">Phone</div>
<div class="second_text">Just For VIP Member</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/21/wgl0.png" alt="image"/>
<div class="wrapper">
<div class="title">Email Us</div>
<div class="second_text">admin#superbtc.biz</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/34/epbs.png" alt="image"/>
<div class="wrapper">
<div class="title">Follow us</div>
<div class="second_text">
<img class="img-pic" src="https://zupimages.net/up/20/34/pnpm.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/qgz1.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/gdph.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/alck.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/evtq.png" alt="image"/>
</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/34/txjb.png" alt="image"/>
<div class="wrapper">
<div class="title">Address</div>
<div class="second_text">2699 BORAMBOLA, New South Wales,Australia.</div>
</div>
</div>
</div>
</body>
</html>

Try using Negative Values to .second_text i.e Margin-left: -40px
Though this is not a best fix but can be a quick fix.

A simplified version. Restructure like this
.row {
display: flex;
}
.row .wrapper {
flex-grow: 1;
position: relative;
}
.row .wrapper .first-text {
display: flex;
align-items: center;
padding: 5px 15px;
}
.row .wrapper .second-text {
padding: 5px 15px;
}
.row .wrapper .first-text img {
margin-right: 15px;
}
.verticle {
background: black;
width: 1px;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
<div class="row">
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
</div>

A better solution would be to use position: relative and left: -40px on your .second_text.

How to make div expand with content using flex?

I have this HTML and CSS:
.container {
width: 100%;
}
.group {
display: flex;
justify-content: space-between;
min-width: 214px;
background: #eee;
}
.abbr {
/* some styling */
}
.name {
/* some styling */
}
<div class="container">
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div>
<p class="name">Mark Smith</p>
</div>
</div>
</div>
Now, if I use just min-width, the whole div stretches as the entire width of the container. If I just use width, it won't expand if the name is longer than Mark Smith (rather it will go to the next line).
This is what I wanted to achieve:
How do I achieve this in flexbox?

What you're looking for is to apply width: fit-content to .group.
Then you can adjust the offset between the abbreviation and name with min-width on the .abbr.
This can be seen in the following:
.group {
display: flex;
width: fit-content;
background: #eee;
margin: 10px 0;
}
.group > div {
margin: 0 10px;
}
.abbr {
min-width: 50px;
}
<div class="container">
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div>
<p class="name">Mark Smith</p>
</div>
</div>
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div>
<p class="name">A Really Really Long Name</p>
</div>
</div>
</div>

I use inline-block on .container so that it won't take up the whole line.
.container {
display: inline-block;
}
.group {
display: flex;
background: #eee;
}
.abbr {
padding: 0 7px;
}
.name {
padding: 0 7px;
}
<div class="container">
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div>
<p class="name">Mark Smith</p>
</div>
</div>
</div><br/><br/>
<div class="container">
<div class="group">
<div class="abbr">
<p>MR</p>
</div>
<div>
<p class="name">Loooooooooooooooong Name</p>
</div>
</div>
</div>
Another solution is to use a third element that consume all the remaining space and set the background color on the text content only:
.container {
margin: 0 0 5px 0;
}
.group {
display: flex;
}
.abbr {
padding: 0 7px;
background: #eee;
}
.name {
padding: 0 7px;
background: #eee;
flex: 0 0 auto;
}
.blank-space{
flex: 1 1 auto;
}
<div class="container">
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div class="name">
<p>Mark Smith</p>
</div>
<div class="blank-space"></div>
</div>
</div>
<div class="container">
<div class="group">
<div class="abbr">
<p>MR</p>
</div>
<div class="name">
<p>Loooooooooooooooong Name</p>
</div>
<div class="blank-space"></div>
</div>
</div>

How can I alternate the float of my content?

I want to create a layout for an itemised list of content like below:
Each item is a container that has an image and block of text.
I have attempted to use nth-child and set different css float values based on if it is an odd or even child, but you can't set child properties using the nth-child selector.
HTML:
<div class="flex-container">
<div class="media-container ">
<img src="img/image.png">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
<div class="flex-container">
<div class="media-container ">
<img src="img/image.png">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
<div class="flex-container">
<div class="media-container ">
<img src="img/image.png">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
CSS:
.flex-container {
width: auto;
margin: 10px auto;
padding: 0 15px;
display: inline-flex;
}
.flex-container:nth-child(odd) {
.media-container {
float: left;
}
.text-container {
float: right;
}
}
.flex-container:nth-child(even) {
.media-container {
float: right;
}
.text-container {
float: left;
}
}
.media-container {
position: relative;
display: inline-block;
}
.media-container img {
width: 100%;
height: auto;
}
.text-container {
width: 30%;
margin: 0 10px;
align-self: center;
position: relative;
display: inline-block;
}
What is the easiest/neatest solution for creating this layout using CSS?

Something like this:
Use the nth-child on your "row" flex-containers and alternate the flex-direction.
.flex-container {
padding: 0 15px;
display: flex;
width: 80%;
border: 1px solid grey;
margin: 1em auto;
}
.flex-container:nth-child(odd) {
flex-direction: row;
}
.flex-container:nth-child(even) {
flex-direction: row-reverse;
}
.media-container img {
width: 100%;
height: auto;
}
.text-container {
width: 30%;
margin: 0 10px;
}
<div class="flex-container">
<div class="media-container ">
<img src="http://www.fillmurray.com/300/200">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
<div class="flex-container">
<div class="media-container ">
<img src="http://www.fillmurray.com/300/200">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>

Take A Look At This:
.item {
width: 305px;
height: 70px;
background: black;
margin: 5px;
padding: 5px;
}
.item .title {
width: 200px;
height: 70px;
background: crimson;
}
.item .img {
width: 100px;
height: 70px;
background: #09f;
}
.item:nth-child(even) .img {
float: right;
}
.item:nth-child(even) .title {
float: left;
}
.item:nth-child(odd) .img {
float: left;
}
.item:nth-child(odd) .title {
float: right;
}
<div class='item'>
<div class='title'></div>
<div class='img'></div>
</div>
<div class='item'>
<div class='title'></div>
<div class='img'></div>
</div>
<div class='item'>
<div class='title'></div>
<div class='img'></div>
</div>

Is it necessary that it is display:inline-flex? If you change it to inline-block, I believe you'll get your intended display:
.flex-container {
display: inline-block;
...
}
https://jsfiddle.net/4rcdqy4f/

You can use the Javascript querySelectorAll() method. Then, loop through the list of your items and add the specific CSS property based on whether it is odd or even.

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

Modify behaviour of CSS after wrap - css

Related

How to prevent the element go outside the div [duplicate]

Flexbox make columns equal heights

Force a block towards the left

How to make div expand with content using flex?

How can I alternate the float of my content?

Categories

Resources