Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> div { width: 250px; border: 1px solid pink; } p { margin-bottom: 20px; } .flex-end { background-color: pink; padding: 10px 0; display: flex; justify-content: flex-end; } </style> </head> <body> <div> <p> Flexbox is a single dimensional layout, which means that it lays items in one dimension at a time, either as a row, or as a column, but not both together. This can be opposed to the two-dimensional model - CSS Grid Layout, which lays the items in two dimensions simultaneously (rows and columns together). </p> <p> In HTML, the default values of the display property are taken from the behaviors which are described in the HTML specifications or from the browser or user default stylesheet. </p> <div class="flex-end"> <button type="button">Button</button> </div> </div> </body> </html>