FlexBox margóbeállítások

A gyermekelemek közötti távolságot a baloldali külső margóval állítjuk be 5px-re. Az első elem margójának elrejtését flex konténer baloldali külső margójának -5px-re állításával valósítjuk meg.

1. Példa:

Forráskód


<head>
...
      <style>
      ...
			.Elem {
				padding: 5px;
				border:1px solid #066;				
				background-color:#fff;
				text-align:center;
			}			
			.divFlex {
				display: flex;	
				justify-content: space-between;	
		
			}	
			img {
				max-width:100%;
			}
			.mleft5 {
				margin-left:5px;
			}
												
		</style>
	</head>
	<body> 
		<h2>margin:0px;</h2>
		<div class="divFlex">
			<div class="Elem">
				<img src="html5_css3_logo.jpg" alt="logo">
				<p>Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit ...</p>
			</div>
			<div class="Elem">
				<img src="html5_css3_logo.jpg" alt="logo">
				<p>Lorem ipsum dolor sit amet ...</p>
			</div>
			<div class="Elem">
				<img src="html5_css3_logo.jpg" alt="logo">
				<p>Lorem ipsum dolor sit amet, 
                            consectetur adipiscing ...</p>
			</div>
		</div>	
		<h2>Elem > margin-left:5px;</h2>
		<div class="divFlex">
			<div class="Elem mleft5">
				<img src="html5_css3_logo.jpg" alt="logo">
				<p>Lorem ipsum dolor sit amet,
                         consectetur adipiscing elit ...</p>
			</div>
			<div class="Elem mleft5">
				<img src="html5_css3_logo.jpg" alt="logo">
				<p>Lorem ipsum dolor sit amet ...</p>
			</div>
			<div class="Elem mleft5">
				<img src="html5_css3_logo.jpg" alt="logo">
				<p>Lorem ipsum dolor sit amet,
                         consectetur adipiscing ...</p>
			</div>
		</div>	
		<h2>divFlex > margin-left:-5px;</h2>
		<div class="divFlex" style="margin-left:-5px";>
			<div class="Elem mleft5">
				<img src="html5_css3_logo.jpg" alt="logo">
				<p>Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit ...</p>
			</div>
			<div class="Elem mleft5">
				<img src="html5_css3_logo.jpg" alt="logo">
				<p>Lorem ipsum dolor sit amet ...</p>
			</div>
			<div class="Elem mleft5">
				<img src="html5_css3_logo.jpg" alt="logo">
				<p>Lorem ipsum dolor sit amet,
                        consectetur adipiscing ...</p>
			</div>
		</div>		
	</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: flexi7.html