IMPLEMENTANDO UN LAYOUT CON UN FLEX BOX MODEL

El Flexbox es un constructor de CSS3 que provee la forma de colocar elementos que fluyen, esto significa que los elementos van de izquierda a derecha o  en Horizontal, de arriba abajo en vertical.

Debes usar un div de la siguiente forma:

<div id=”flexbox”>

</div>

 

#flexbox {

display: flexbox;

border: 1 px solid black;

margin-top: 100px;

min-height: 15px;

box-orient: horizontal;

}

 

Otro ejemplo

<div id=”flexbox”>

<p>child 1</p>

<p>child 2</p>

<p>child 3</p>

</div>

Tiene también la funcionalidad de proveer la capacidad de espacio especifico a cada elemento hijo.

Por ejemplo si se requiere que una caja ocupe el 15% y otra el 25% y el último el espacio que queda debería utilizar la propiedad flex.

 

Tip de examen:

You are developing a web page that will be divided into three vertical sections. The main content of the site will be placed in the center section. The two outer sections will contain advertisements.

You have the following requirements:

-The main content section must be set to two times the width of the advertising sections.

-The layout must be specified by using the CSS3 flexible box model.

 

You need to ensure that the visual layout of the page meets the requirements.

Which CSS3 property should you use?

box-flex

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *