html - How do I align an item to the right inside a flex container? -


I'm starting to use a flex box, but I'm not sure how to put an element inside a flake container Setting, which is to be located on the right side? I have tried to apply the code to align-self: flex-end and justify-content: flex-end without any success, so I hope someone can help me Could?

CSS

.ctn {background: lightblue; Height: 100 pixels; Padding: 10px; Exhibit: Flex; Alignment-item: center; } .btn {framework: none; Border: None; color navy; Background: light; Height: 50px; Line-height: 50px; Width: 200px; Text-transform: uppercase; }

Codeplee:

Alignment is self-alignment-similar to the property of objects: it only changes the alignment on the cross axis (it is standing when you are using the line direction). No, what you want here.

You can use the property of equitable material if you have more than 2 items, then they equally equally with the first item on the left and the last item all the way to the right Will be separated:

  .ctn {background: light blue; Height: 100 pixels; Padding: 10px; Exhibit: Flex; Alignment-item: center; Appropriate Material: Space-Between; }  

Or you can use margin-left on the object that you want to change in the right direction. If you have more than 2 items, then it will transfer all the previous items to the left:

  .btn {outline: none; Border: None; color navy; Background: light; Height: 50px; Line-height: 50px; Width: 200px; Text-transform: uppercase; Margin-left: auto; }  

Comments

Popular posts from this blog

java - org.apache.http.ProtocolException: Target host is not specified -

java - Gradle dependencies: compile project by relative path -

ruby on rails - Object doesn't support #inspect when used with .include -